AngularJS: Comment effacer les paramètres de requête dans l'URL?

Mon application AngularJS doit avoir accès au profil LinkedIn de l'utilisateur. Pour ce faire, je dois rediriger l'utilisateur vers une URL LinkedIn qui contient un paramètre de rappel redirect_uri qui indiquera à LinkedIn de rediriger l'utilisateur vers mon application Web et d'inclure un paramètre de requête "code" dans l'URL. C'est un flux Oauth 2.0 traditionnel.

Tout fonctionne très bien sauf que LinkedIn redirige l'utilisateur vers l'URL suivante:

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

Je voudrais supprimer ?code=XXX&state=YYYde l'URL afin de la rendre propre. L'utilisateur n'a pas besoin de voir les paramètres de requête que j'ai reçus de la redirection LinkedIn.

J'ai essayé $location.absUrl($location.path() + $location.hash()).replace(), mais cela garde les paramètres de requête dans l'URL.

Je suis également incapable d'extraire les paramètres de requête, par exemple "code", en utilisant ($location.search()).code. Cela semble avoir? avant # dans l'URL ci-dessus trompe Angular.

j'utilise

$location.search('key', null)

Comme cela supprime non seulement ma clé, mais la supprime de la visibilité sur l'URL.

J'ai fini par obtenir la réponse du forum AngularJS. Voir ce fil pour plus de détails

Le lien est vers un fil de discussion Google Groupes, qui est difficile à lire et ne fournit pas de réponse claire. Pour supprimer les paramètres d'URL, utilisez

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

Pour supprimer TOUS les paramètres de requête, procédez comme suit:

$location.search({});

Pour supprimer UN paramètre de requête particulier, procédez comme suit:

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

Pour effacer un élément, supprimez-le et appelez $$ compose

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

dérivé de la source angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Vous pouvez supprimer un paramètre de requête spécifique en utilisant:

delete $location.$$search.nameOfParameter;

Ou vous pouvez effacer tous les paramètres de requête en définissant la recherche sur un objet vide:

$location.$$search = {};

Au moment de la rédaction, et comme mentionné précédemment par @Bosh, html5modedoit être trueen mesure de le définir $location.search()et de le refléter dans l'URL visuelle de la fenêtre.

Voir https://github.com/angular/angular.js/issues/1521 pour plus d'informations.

Mais si html5mode c'est le truecas, vous pouvez facilement effacer la chaîne de requête de l'URL avec:

$location.search('');

ou

$location.search({});

Cela modifiera également l'URL visuelle de la fenêtre.

(Testé en version AngularJS 1.3.0-rc.1avec html5Mode(true).)

Besoin de le faire fonctionner quand html5mode= false?

Toutes les autres réponses ne fonctionnent que lorsque Angular html5modeest true. Si vous travaillez en dehors de html5mode, alors se $locationréfère uniquement au "faux" emplacement qui vit dans votre hachage - et $location.searchne peut donc pas voir / modifier / corriger les paramètres de recherche de la page réelle.

Voici une solution de contournement, à insérer dans le HTML de la page avant les chargements angulaires:

<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>

Juste utiliser

$location.url();

Au lieu de

$location.path();

Si vous souhaitez passer à une autre URL et effacer les paramètres de requête, utilisez simplement:

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

Si vous utilisez des paramètres de routes, effacez simplement $ routeParams

$routeParams= null;

Que diriez-vous simplement de définir le hachage de l'emplacement sur null

$location.hash(null);

si vous traitez les paramètres immédiatement puis passez à la page suivante, vous pouvez mettre un point d'interrogation à la fin du nouvel emplacement.

par exemple, si vous auriez fait $ location.path ('/ nextPage');

vous pouvez le faire à la place: $ location.path ('/ nextPage?');

J'ai essayé les réponses ci-dessus mais je n'ai pas pu les faire fonctionner. Le seul code qui a fonctionné pour moi était$window.location.search = ''

Je peux remplacer tous les paramètres de requête par cette seule ligne: moyen $location.search({});
facile à comprendre et simple de les effacer.

La réponse acceptée a fonctionné pour moi, mais j'avais besoin de creuser un peu plus pour résoudre les problèmes avec le bouton de retour.

Ce que j'ai remarqué, c'est que si je crée un lien vers une page en utilisant <a ui-sref="page({x: 1})">, puis que je supprime la chaîne de requête en utilisant $location.search('x', null), je n'obtiens pas d'entrée supplémentaire dans l'historique de mon navigateur, donc le bouton Précédent me ramène à mon point de départ. Bien que je pense que c'est faux parce que je ne pense pas qu'Angular devrait automatiquement supprimer cette entrée d'historique pour moi, c'est en fait le comportement souhaité pour mon cas d'utilisation particulier.

Le problème est que si je lien vers la page en utilisant la <a href="https://stackoverflow.com/page/?x=1">place, puis retirez la chaîne de requête de la même manière, je fais obtenir une entrée supplémentaire dans mon historique du navigateur, donc je dois cliquer sur le bouton retour deux fois pour revenir à l' endroit où j'ai commencé . C'est un comportement incohérent, mais en fait cela semble plus correct.

Je peux facilement résoudre le problème des hrefliens en utilisant $location.search('x', null).replace(), mais cela casse la page lorsque vous y arrivez via un ui-sreflien, donc ce n'est pas bon.

Après beaucoup de bidouilles, voici le correctif que j'ai trouvé:

Dans la runfonction de mon application, j'ai ajouté ceci:

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

Ensuite, j'utilise ce code pour supprimer le paramètre de chaîne de requête:

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

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

Pour Angular> 2 , vous pouvez passer null à tous les paramètres que vous souhaitez effacer

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