AngularJS : Comment effacer les paramètres d'interrogation dans l'URL ?

Question

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 callback redirect_uri qui indiquera à LinkedIn de rediriger l'utilisateur vers ma webapp et d'inclure un paramètre de requête "code" dans l'URL. Il s'agit d'un flux Oauth 2.0 traditionnel.

Tout fonctionne parfaitement, 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=YYY de 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 il conserve les paramètres de la requête dans l'URL.

Je n'arrive pas non plus à extraire les paramètres de la requête, par exemple "code", en utilisant ($location.search()).code . Il semble que le fait d'avoir ? avant # dans l'URL ci-dessus trompe Angular.

Answer 1

Pourquoi ne pas simplement mettre le hash de l'emplacement à null ?

$location.hash(null);

Answer 2

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

Answer 3

Je peux remplacer tous les paramètres de la requête par cette seule ligne : $location.search({});
Facile à comprendre et à faire disparaître.

Answer 4

La réponse acceptée a fonctionné pour moi, mais j'ai dû creuser un peu plus pour résoudre les problèmes liés au bouton retour.

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

Le problème est que si je fais un lien vers la page en utilisant <a href="http://stackoverflow.com/page/?x=1"> à la place, puis supprimer la chaîne de requête de la même manière, je faire une entrée supplémentaire dans l'historique de mon navigateur, ce qui m'oblige à cliquer sur le bouton "retour". deux fois pour revenir à mon point de départ. C'est un comportement incohérent, mais en fait cela semble plus correct.

Je peux facilement résoudre le problème avec href en utilisant $location.search('x', null).replace() mais cela casse la page lorsque l'on y accède par le biais d'une adresse e-mail. ui-sref lien, donc ce n'est pas bon.

Après avoir beaucoup bricolé, voici la solution que j'ai trouvée :

Dans l'application run j'ai ajouté cette fonction :

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

J'utilise ensuite ce code pour supprimer le paramètre de la chaîne de requête :

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

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

Answer 5

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

Par exemple, si vous aviez fait $location.path('/nextPage') ;

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