AngularJS: come cancellare i parametri di query nell'URL?

La mia applicazione AngularJS deve avere accesso al profilo LinkedIn dell'utente. Per fare ciò devo reindirizzare l'utente a un URL di LinkedIn che contiene un parametro redirect_uri di callback che dirà a LinkedIn di reindirizzare l'utente al mio webapp e includere un parametro di query "codice" nell'URL. È un flusso Oauth 2.0 tradizionale.

Tutto funziona alla grande, tranne che LinkedIn reindirizza l'utente al seguente URL:

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

Vorrei rimuovere ?code=XXX&state=YYYdall'URL per renderlo pulito. Non è necessario che l'utente visualizzi i parametri della query che ho ricevuto dal reindirizzamento di LinkedIn.

Ho provato $location.absUrl($location.path() + $location.hash()).replace(), ma mantiene i parametri della query nell'URL.

Inoltre, non sono in grado di estrarre i parametri della query, ad es. "Codice" ($location.search()).code. Sembra di averlo? prima che # nell'URL sopra stia ingannando Angular.

Io uso

$location.search('key', null)

Poiché questo non solo elimina la mia chiave, ma la rimuove dalla visibilità sull'URL.

Ho finito per ottenere la risposta dal forum AngularJS. Vedi questa discussione per i dettagli

Il link è a un thread di Google Gruppi, che è difficile da leggere e non fornisce una risposta chiara. Per rimuovere i parametri URL utilizzare

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

Per rimuovere TUTTI i parametri della query, eseguire:

$location.search({});

Per rimuovere UN parametro di query particolare, eseguire:

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

Per cancellare un elemento, cancellalo e chiama $$ compose

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

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

È possibile eliminare un parametro di query specifico utilizzando:

delete $location.$$search.nameOfParameter;

Oppure puoi cancellare tutti i parametri della query impostando la ricerca su un oggetto vuoto:

$location.$$search = {};

Al momento della stesura di questo documento, e come precedentemente menzionato da @Bosh, html5modedeve trueessere possibile per poterlo impostare $location.search()e farlo riflettere nell'URL visivo della finestra.

Vedi https://github.com/angular/angular.js/issues/1521 per maggiori informazioni.

Ma se html5mode ètrue possibile cancellare facilmente la stringa di query dell'URL con:

$location.search('');

o

$location.search({});

Ciò modificherà anche l'URL visivo della finestra.

(Testato nella versione AngularJS 1.3.0-rc.1con html5Mode(true).)

Devi farlo funzionare quando html5mode= false?

Tutte le altre risposte funzionano solo quando lo html5modeè Angular true. Se lavori al di fuori di html5mode, allora si $locationriferisce solo alla posizione "falsa" che vive nel tuo hash - e quindi $location.searchnon puoi vedere / modificare / correggere i parametri di ricerca della pagina reale.

Ecco una soluzione alternativa, da inserire nell'HTML della pagina prima dei carichi angolari:

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

Basta usare

$location.url();

Invece di

$location.path();

Se vuoi passare a un altro URL e cancellare i parametri della query, utilizza semplicemente:

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

Se stai utilizzando i parametri di route, deseleziona $ routeParams

$routeParams= null;

Che ne dici di impostare solo l'hash della posizione su null

$location.hash(null);

se si elaborano immediatamente i parametri e si passa alla pagina successiva, è possibile inserire un punto interrogativo alla fine della nuova posizione.

per esempio, se avessi fatto $ location.path ('/ nextPage');

puoi invece farlo: $ location.path ('/ nextPage?');

Ho provato le risposte sopra ma non sono riuscito a farle funzionare. L'unico codice che ha funzionato per me era$window.location.search = ''

Posso sostituire tutti i parametri della query con questa singola riga: un modo $location.search({});
facile da capire e semplice per cancellarli.

La risposta accettata ha funzionato per me, ma avevo bisogno di scavare un po 'più a fondo per risolvere i problemi con il pulsante Indietro.

Quello che ho notato è che se collego a una pagina utilizzando <a ui-sref="page({x: 1})">, quindi rimuovere la stringa di query utilizzando$location.search('x', null) , non ottengo una voce aggiuntiva nella cronologia del mio browser, quindi il pulsante Indietro mi riporta a dove ho iniziato. Sebbene ritenga che ciò sia sbagliato perché non credo che Angular dovrebbe rimuovere automaticamente questa voce della cronologia per me, questo è in realtà il comportamento desiderato per il mio caso d'uso specifico.

Il problema è che se mi collego alla pagina utilizzando <a href="https://stackoverflow.com/page/?x=1">, invece, quindi rimuovere la stringa di query nello stesso modo, mi faccio trovare una voce in più nel mio cronologia del browser, quindi devo fare clic sul pulsante Indietro due volte per tornare a dove ho iniziato . Questo è un comportamento incoerente, ma in realtà sembra più corretto.

Posso facilmente risolvere il problema con i hrefcollegamenti utilizzando $location.search('x', null).replace(), ma questo interrompe la pagina quando si arriva su di esso tramite un ui-srefcollegamento, quindi non va bene.

Dopo aver armeggiato molto, questa è la soluzione che mi è venuta in mente:

Nella runfunzione della mia app ho aggiunto questo:

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

Quindi uso questo codice per rimuovere il parametro della stringa di query:

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

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

Per Angolare> 2 , è possibile passare null a tutti i parametri che si desidera cancellare

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