AngularJS: Como limpar os parâmetros de consulta na URL?

Meu aplicativo AngularJS precisa ter acesso ao perfil do usuário no LinkedIn. Para fazer isso, preciso redirecionar o usuário para uma URL do LinkedIn que contenha um parâmetro de retorno de chamada redirect_uri que instruirá o LinkedIn a redirecionar o usuário de volta ao meu aplicativo da web e incluir um parâmetro de consulta "código" no URL. É um fluxo tradicional do Oauth 2.0.

Tudo funciona muito bem, exceto que o LinkedIn redireciona o usuário de volta para o seguinte URL:

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

Gostaria de remover ?code=XXX&state=YYYdo URL para torná-lo limpo. O usuário não precisa ver os parâmetros de consulta que recebi do redirecionamento do LinkedIn.

Eu tentei $location.absUrl($location.path() + $location.hash()).replace(), mas ele mantém os parâmetros de consulta na URL.

Também não consigo extrair os parâmetros de consulta, por exemplo, "código", usando ($location.search()).code. Parece ter? antes de # no URL acima estar enganando Angular.

eu uso

$location.search('key', null)

Como isso não apenas exclui minha chave, mas a remove da visibilidade na URL.

Acabei recebendo a resposta do fórum AngularJS. Veja este tópico para detalhes

O link é para um segmento dos Grupos do Google, que é difícil de ler e não fornece uma resposta clara. Para remover os parâmetros de URL, use

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

Para remover TODOS os parâmetros de consulta, faça:

$location.search({});

Para remover UM parâmetro de consulta específico, faça:

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

Para limpar um item, exclua-o e chame $$ componete

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

derivado da fonte angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Você pode excluir um parâmetro de consulta específico usando:

delete $location.$$search.nameOfParameter;

Ou você pode limpar todos os parâmetros de consulta configurando a pesquisa para um objeto vazio:

$location.$$search = {};

No momento da redação deste artigo, e como mencionado anteriormente pelo @Bosh, html5modeé truenecessário poder definir $location.search()e refletir a URL visual da janela.

Consulte https://github.com/angular/angular.js/issues/1521 para obter mais informações.

Mas se html5mode for,true você pode facilmente limpar a string de consulta da URL com:

$location.search('');

ou

$location.search({});

Isso também altera o URL visual da janela.

(Testado na versão AngularJS 1.3.0-rc.1com html5Mode(true).)

Precisa fazê-lo funcionar quando html5mode= false?

Todas as outras respostas funcionam apenas quando Angular html5modeé true. Se você trabalha fora html5mode, $locationrefere - se apenas ao local "falso" que reside no seu hash - e, portanto, $location.searchnão pode ver / editar / corrigir os parâmetros de pesquisa da página real.

Aqui está uma solução alternativa, a ser inserida no HTML da página antes do carregamento angular:

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

Apenas use

$location.url();

Ao invés de

$location.path();

Se você deseja mover para outro URL e limpar os parâmetros de consulta, basta usar:

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

Se você estiver usando parâmetros de rotas, limpe $ routeParams

$routeParams= null;

Que tal apenas definir o hash do local como nulo

$location.hash(null);

se você processar os parâmetros imediatamente e passar para a próxima página, poderá colocar um ponto de interrogação no final do novo local.

por exemplo, se você tivesse feito $ location.path ('/ nextPage');

você pode fazer isso: $ location.path ('/ nextPage?');

Eu tentei as respostas acima, mas não consegui fazê-las funcionar. O único código que funcionou para mim foi$window.location.search = ''

Posso substituir todos os parâmetros de consulta por esta única linha: $location.search({});
Fácil de entender e fácil de limpá-los.

A resposta aceita funcionou para mim, mas eu precisava me aprofundar um pouco mais para corrigir os problemas com o botão Voltar.

O que eu notei é que, se eu vincular uma página usando <a ui-sref="page({x: 1})">e remover a string de consulta usando $location.search('x', null), não recebo uma entrada extra no histórico do navegador; portanto, o botão Voltar me leva de volta para onde comecei. Embora eu ache que isso esteja errado, porque não acho que o Angular remova automaticamente essa entrada do histórico para mim, esse é realmente o comportamento desejado para o meu caso de uso específico.

O problema é que se eu ligar para a página usando <a href="https://stackoverflow.com/page/?x=1">em vez disso, em seguida, remover a string de consulta da mesma forma, eu faço obter uma entrada extra no meu histórico do navegador, então eu tenho que clicar no botão Voltar duas vezes para voltar para onde eu comecei . Esse é um comportamento inconsistente, mas na verdade isso parece mais correto.

Posso corrigir facilmente o problema com os hreflinks usando $location.search('x', null).replace(), mas isso interrompe a página quando você acessa a página por meio de um ui-sreflink, então isso não é bom.

Depois de muitas brincadeiras, essa é a solução que eu criei:

Na runfunção do meu aplicativo, adicionei isso:

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

Então eu uso esse código para remover o parâmetro da string de consulta:

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

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

Para Angular> 2 , você pode passar nulo a todos os parâmetros que deseja limpar

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