AngularJS: ¿Cómo borrar los parámetros de consulta en la URL?

Mi aplicación AngularJS necesita tener acceso al perfil de usuario de LinkedIn. Para hacer eso, necesito redirigir al usuario a una URL de LinkedIn que contiene un parámetro de devolución de llamada redirect_uri que le indicará a LinkedIn que redirija al usuario de nuevo a mi aplicación web e incluya un parámetro de consulta de "código" en la URL. Es un flujo tradicional de Oauth 2.0.

Todo funciona muy bien, excepto que LinkedIn redirige al usuario a la siguiente URL:

http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites

Me gustaría eliminar ?code=XXX&state=YYYde la URL para que quede limpia. El usuario no necesita ver los parámetros de consulta que recibí de la redirección de LinkedIn.

Lo intenté $location.absUrl($location.path() + $location.hash()).replace(), pero mantiene los parámetros de consulta en la URL.

Tampoco puedo extraer los parámetros de consulta, por ejemplo, "código", usando ($location.search()).code. Parece que tiene? antes de # en la URL anterior está engañando a Angular.

yo suelo

$location.search('key', null)

Como esto no solo elimina mi clave, sino que la elimina de la visibilidad en la URL.

Terminé recibiendo la respuesta del foro AngularJS. Ver este hilo para más detalles

El enlace es a un hilo de Grupos de Google, que es difícil de leer y no proporciona una respuesta clara. Para eliminar los parámetros de URL use

$location.url($location.path());

Para eliminar TODOS los parámetros de consulta, haga:

$location.search({});

Para eliminar UN parámetro de consulta particular, haga:

$location.search('myQueryParam', null);

Para borrar un elemento, bórrelo y llame a $$ compose

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

derivado de la fuente angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Puede eliminar un parámetro de consulta específico utilizando:

delete $location.$$search.nameOfParameter;

O puede borrar todos los parámetros de consulta configurando la búsqueda en un objeto vacío:

$location.$$search = {};

En el momento de la escritura, y como se mencionó anteriormente por @Bosh, html5modedebe estar trueen orden para poder configurarlo $location.search()y que se refleje de nuevo en la URL visual de la ventana.

Consulte https://github.com/angular/angular.js/issues/1521 para obtener más información.

Pero si html5mode estrue así, puede borrar fácilmente la cadena de consulta de la URL con:

$location.search('');

o

$location.search({});

Esto también alterará la URL visual de la ventana.

(Probado en la versión AngularJS 1.3.0-rc.1con html5Mode(true).)

¿Necesita hacer que funcione cuando html5mode= false?

Todas las otras respuestas funcionan solo cuando Angular html5modees true. Si está trabajando fuera de html5mode, entonces se $locationrefiere solo a la ubicación "falsa" que vive en su hash, por $location.searchlo que no puede ver / editar / corregir los parámetros de búsqueda de la página real.

Aquí hay una solución alternativa, que se insertará en el HTML de la página antes de las cargas angulares:

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>

Solo usa

$location.url();

En vez de

$location.path();

Si desea pasar a otra URL y borrar los parámetros de consulta, simplemente use:

$location.path('/my/path').search({});

Si está utilizando parámetros de rutas, simplemente borre $ routeParams

$routeParams= null;

¿Qué tal simplemente establecer el hash de ubicación en nulo?

$location.hash(null);

Si procesa los parámetros inmediatamente y luego pasa a la página siguiente, puede colocar un signo de interrogación al final de la nueva ubicación.

por ejemplo, si hubiera hecho $ location.path ('/ nextPage');

puede hacer esto en su lugar: $ location.path ('/ nextPage?');

He intentado las respuestas anteriores pero no pude hacer que funcionen. El único código que funcionó para mí fue$window.location.search = ''

Puedo reemplazar todos los parámetros de consulta con esta única línea: $location.search({});
fácil de entender y una forma fácil de borrarlos.

La respuesta aceptada funcionó para mí, pero necesitaba profundizar un poco más para solucionar los problemas con el botón Atrás.

Lo que noté es que si enlazo a una página usando <a ui-sref="page({x: 1})">, luego elimino la cadena de consulta usando $location.search('x', null), no obtengo una entrada adicional en el historial de mi navegador, por lo que el botón Atrás me lleva de regreso a donde comencé. Aunque siento que esto está mal porque no creo que Angular deba eliminar automáticamente esta entrada del historial, este es realmente el comportamiento deseado para mi caso de uso particular.

El problema es que si me enlace a la página utilizando <a href="https://stackoverflow.com/page/?x=1">en su lugar, a continuación, quitar la cadena de consulta de la misma manera, yo hago conseguir una entrada extra en mi historial del navegador, por lo que tengo que hacer clic en el botón Atrás dos veces para volver al punto de partida . Este es un comportamiento inconsistente, pero en realidad esto parece más correcto.

Puedo solucionar fácilmente el problema con los hrefenlaces mediante el uso $location.search('x', null).replace(), pero esto rompe la página cuando aterrizas a través de un ui-srefenlace, por lo que esto no es bueno.

Después de mucho juguetear, esta es la solución que se me ocurrió:

En la runfunción de mi aplicación, agregué esto:

$rootScope.$on('$locationChangeSuccess', function () {
    $rootScope.locationPath = $location.path();
});

Luego uso este código para eliminar el parámetro de cadena de consulta:

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}

Para Angular> 2 , puede pasar nulo a todos los parámetros que desea borrar

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})