AngularJS: Jak wyczyścić parametry zapytania w adresie URL?

Moja aplikacja AngularJS musi mieć dostęp do profilu LinkedIn użytkownika. Aby to zrobić, muszę przekierować użytkownika do adresu URL LinkedIn, który zawiera parametr redirect_uri wywołania zwrotnego, który poinformuje LinkedIn, aby przekierował użytkownika z powrotem do mojej aplikacji internetowej i zawarł parametr zapytania „kod” w adresie URL. To tradycyjny przepływ Oauth 2.0.

Wszystko działa świetnie, z wyjątkiem tego, że LinkedIn przekierowuje użytkownika z powrotem na następujący adres URL:

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

Chciałbym usunąć ?code=XXX&state=YYYz adresu URL, aby był czysty. Użytkownik nie musi widzieć parametrów zapytania, które otrzymałem z przekierowania LinkedIn.

Próbowałem $location.absUrl($location.path() + $location.hash()).replace(), ale zachowuje parametry zapytania w adresie URL.

Nie jestem również w stanie wyodrębnić parametrów zapytania, np. „Kod”, używając ($location.search()).code . Wygląda na to, że masz? przed # w powyższym adresie URL oszukuje Angulara.

używam

$location.search('key', null)

Ponieważ to nie tylko usuwa mój klucz, ale usuwa go z widoczności pod adresem URL.

W końcu otrzymałem odpowiedź z forum AngularJS. Zobacz ten wątek po szczegóły

Link prowadzi do wątku w Grupach dyskusyjnych Google, który jest trudny do odczytania i nie daje jasnej odpowiedzi. Aby usunąć parametry adresu URL, użyj

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

Aby usunąć WSZYSTKIE parametry zapytania, wykonaj:

$location.search({});

Aby usunąć JEDEN konkretny parametr zapytania, wykonaj:

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

Aby wyczyścić element, usuń go i zadzwoń do $$ redaguj

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

pochodzi ze źródła angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Możesz usunąć określony parametr zapytania przy użyciu:

delete $location.$$search.nameOfParameter;

Lub możesz wyczyścić wszystkie parametry zapytania, ustawiając wyszukiwanie na pusty obiekt:

$location.$$search = {};

W chwili pisania tego tekstu, jak wcześniej wspomniał @Bosh, html5modemusi truebyć możliwe ustawienie$location.search() i odzwierciedlić z powrotem w wizualnym adresie URL okna.

Zobacz https://github.com/angular/angular.js/issues/1521 uzyskać więcej informacji, .

Ale jeśli html5mode taktrue , możesz łatwo wyczyścić ciąg zapytania adresu URL za pomocą:

$location.search('');

lub

$location.search({});

Spowoduje to również zmianę wizualnego adresu URL okna.

(Testowane w wersji AngularJS 1.3.0-rc.1z html5Mode(true).)

Musisz sprawić, by działało, gdy html5mode= false?

Wszystkie inne odpowiedzi działają tylko wtedy, gdy jest html5modeto Angular true. Jeśli pracujesz poza nim html5mode, $locationodnosi się tylko do „fałszywej” lokalizacji, która znajduje się w twoim hashu - i tak dalej$location.search nie możesz zobaczyć / edytować / naprawić parametrów wyszukiwania rzeczywistej strony.

Oto obejście, które należy wstawić do kodu HTML strony przed obciążeniami kątowymi:

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

Po prostu użyj

$location.url();

Zamiast

$location.path();

Jeśli chcesz przejść do innego adresu URL i wyczyścić parametry zapytania, użyj:

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

Jeśli używasz parametrów tras, po prostu wyczyść $ routeParams

$routeParams= null;

Co powiesz na ustawienie skrótu lokalizacji na null

$location.hash(null);

jeśli natychmiast przetworzysz parametry, a następnie przejdziesz do następnej strony, możesz umieścić znak zapytania na końcu nowej lokalizacji.

na przykład, gdybyś zrobił $ location.path ('/ nextPage');

możesz to zrobić zamiast tego: $ location.path ('/ nextPage?');

Wypróbowałem powyższe odpowiedzi, ale nie mogłem ich zmusić do działania. Jedyny kod, który działał dla mnie, to$window.location.search = ''

Mogę zastąpić wszystkie parametry zapytania tym pojedynczym wierszem: $location.search({});
łatwy do zrozumienia i łatwy sposób na ich usunięcie.

Przyjęta odpowiedź zadziałała dla mnie, ale musiałem poszukać trochę głębiej, aby naprawić problemy z przyciskiem Wstecz.

Zauważyłem, że jeśli utworzę link do strony za pomocą <a ui-sref="page({x: 1})">, usuń ciąg zapytania za pomocą$location.search('x', null) , nie dostaję dodatkowego wpisu w historii przeglądarki, więc przycisk Wstecz przenosi mnie z powrotem do miejsca, w którym zacząłem. Chociaż wydaje mi się, że jest to złe, ponieważ nie sądzę, aby Angular automatycznie usuwał ten wpis historii za mnie, jest to w rzeczywistości pożądane zachowanie w moim konkretnym przypadku użycia.

Problem polega na tym, że jeśli link do tej strony używając <a href="https://stackoverflow.com/page/?x=1">zamiast, a następnie usunąć ciąg kwerendy w ten sam sposób, to zrobić uzyskać dodatkowy wpis w mojej historii przeglądarki, więc muszę kliknąć przycisk Wstecz dwukrotnie , aby wrócić do miejsca, gdzie zacząłem . Jest to niespójne zachowanie, ale w rzeczywistości wydaje się to bardziej poprawne.

Mogę łatwo rozwiązać problem z hreflinkami za pomocą $location.search('x', null).replace(), ale wtedy powoduje to uszkodzenie strony, gdy wylądujesz na niej za pośrednictwem ui-sreflinku, więc to nie jest dobre.

Po wielu zabawach, oto poprawka, którą wymyśliłem:

W funkcji mojej aplikacji rundodałem to:

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

Następnie używam tego kodu, aby usunąć parametr ciągu zapytania:

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

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

Dla Angular> 2 możesz przekazać null do wszystkich parametrów, które chcesz wyczyścić

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