sce - trusted html angularjs




AngularJS: Como limpar os parâmetros de consulta no URL? (10)

Precisa fazer isso funcionar quando html5mode = false ?

Todas as outras respostas funcionam apenas quando o html5mode do Angular é true . Se você estiver trabalhando fora do html5mode , $location refere-se apenas ao local "falso" que mora no seu hash - e então $location.search nã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 dos carregamentos 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>

Meu aplicativo AngularJS precisa ter acesso ao perfil do usuário no LinkedIn. Para fazer isso, preciso redirecionar o usuário para um URL do LinkedIn que contenha um parâmetro de retorno de chamada redirect_uri, que informará ao LinkedIn para redirecionar o usuário de volta ao meu webapp e incluir um parâmetro de consulta "code" 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=YYY do 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 manter a consulta params na URL.

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


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

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

O problema é que, se eu criar um link para a página usando <a href="/page/?x=1"> , em seguida, remover a string de consulta da mesma maneira, recebo uma entrada extra no histórico do meu navegador. tem que clicar no botão Voltar duas vezes para voltar para onde eu comecei. Este é um comportamento inconsistente, mas na verdade isso parece mais correto.

Eu posso facilmente corrigir o problema com links href usando $location.search('x', null).replace() , mas isso quebra a página quando você ui-sref link ui-sref , então isso não é bom .

Depois de muito mexer, essa é a correção que eu resolvi:

Na função de run do meu aplicativo, adicionei isso:

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

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

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

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

Apenas use

$location.url();

Ao invés de

$location.path();

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


No momento da escrita, e como mencionado anteriormente pelo @Bosh, o html5mode deve ser true para poder definir $location.search() e tê-lo refletido de volta no URL visual da janela.

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

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

$location.search('');

ou

$location.search({});

Isso também alterará o URL visual da janela.

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



Que tal simplesmente definir o hash do local como nulo

$location.hash(null);

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

$routeParams= null;

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

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

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

delete $location.$$search.nameOfParameter;

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

$location.$$search = {};




angularjs