Utilizzando $ window o $ location per reindirizzare in AngularJS

90

L'app su cui sto lavorando contiene vari stati (utilizzando ui-router), in cui alcuni stati richiedono di essere loggati, altri sono disponibili pubblicamente.

Ho creato un metodo che verifica validamente se un utente ha effettuato l'accesso, ciò con cui sto attualmente riscontrando problemi è in realtà il reindirizzamento alla nostra pagina di accesso quando necessario. Va notato che la pagina di accesso non è attualmente posizionata all'interno dell'app AngularJS.

app.run(function ($rootScope, $location, $window) {


    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.data.loginReq && !$rootScope.me.loggedIn) {
            var landingUrl = $window.location.host + "/login";
            console.log(landingUrl);
            $window.open(landingUrl, "_self");
        }
    });
});

Il file console.log mostra correttamente l'URL desiderato. La riga successiva, ho provato praticamente di tutto, da $ window.open a window.location.href e non importa cosa ho provato, non accade alcun reindirizzamento.

MODIFICA (RISOLTO):

Trovato il problema.

var landingUrl = $window.location.host + "/login";
$window.open(landingUrl, "_self");

La variabile landingUrl era impostata su "domain.com/login", che non funzionava con $ window.location.href (che era una delle cose che ho provato). Tuttavia, dopo aver modificato il codice in

var landingUrl = "http://" + $window.location.host + "/login";
$window.location.href = landingUrl;

ora funziona.

— Thorbjørn Kappel Hansen
fonte

Probabilmente dovrei aggiungere che c'è anche un'autenticazione lato server sui dati, quindi quanto sopra non è l'unica autenticazione, è più una questione di comodità reindirizzare alla pagina di accesso, invece di mostrare una pagina per lo più vuota.

— Thorbjørn Kappel Hansen

1

hai bisogno locationdell'oggetto nativo usando$window.location=...

— charlietfl

Invece potresti considerare di renderlo tutto un AngularJS inclusa la tua autenticazione - vedi questo post frederiknakstad.com/2013/01/21/…

— Soren

Il piano è di includere tutto (incluso il login) all'interno dell'app AngularJS alla fine, ma poiché stiamo attualmente effettuando la transizione ad AngularJS, la schermata di registrazione / accesso sembra essere la meno importante in questa fase.

— Thorbjørn Kappel Hansen

82

Credo che il modo per farlo sia $location.url('/RouteTo/Login');

Modifica per chiarezza

Supponiamo che il mio percorso per la mia visualizzazione di accesso fosse /Login, direi $location.url('/Login')di navigare verso quel percorso.

Per le posizioni al di fuori dell'app Angular (ovvero nessun percorso definito), verrà pubblicato il vecchio JavaScript:

window.location = "http://www.my-domain.com/login"

— m.casey
fonte

L'ho appena provato. Sfortunatamente, questo reindirizza a www.domain.com/app/RouteTo/login piuttosto che a www.domain.com/login

— Thorbjørn Kappel Hansen

Giusto, non voleva essere letterale. Non so cosa hai definito come percorso per la tua visualizzazione di accesso. Metti qualunque cosa possa essere quella rotta nell'argomento del metodo $ location.url (). Ho modificato la risposta per chiarezza.

— m.casey

Ah giusto. Il problema qui è che $ location.url reindirizza ancora a un sottopercorso dell'app. Quindi, utilizzando $ location.url ('/ login') si reindirizza a www.domain.com/app/login piuttosto che a www.domain.com/login

— Thorbjørn Kappel Hansen

1

Bene, come indicato nella domanda, attualmente la pagina di accesso si trova all'esterno dell'app AngularJS. Da qui la necessità di reindirizzare a www.domain.com/login piuttosto che a un percorso all'interno dell'app.

— Thorbjørn Kappel Hansen

5

Vale anche la pena ricordare che probabilmente dovresti usare al $windowposto di window(fonte: stackoverflow.com/questions/28906180/… )

— Caleb Faruki

39

Sembra che per la ricarica della pagina intera $window.location.hrefsia il modo preferito.

Non causa il ricaricamento di una pagina intera quando l'URL del browser viene modificato. Per ricaricare la pagina dopo aver modificato l'URL, utilizza l'API di livello inferiore, $ window.location.href.

https://docs.angularjs.org/guide/$location

— Diego Ferri
fonte

19

Potrebbe aiutarti! demo

Esempio di codice AngularJs

var app = angular.module('urlApp', []);
app.controller('urlCtrl', function ($scope, $log, $window) {
    $scope.ClickMeToRedirect = function () {
        var url = "http://" + $window.location.host + "/Account/Login";
        $log.log(url);
        $window.location.href = url;
    };
});

Esempio di codice HTML

<div ng-app="urlApp">
    <div ng-controller="urlCtrl">
        Redirect to <a href="#" ng-click="ClickMeToRedirect()">Click Me!</a>
    </div>
</div>

— Anil Singh
fonte

4

Non sono sicuro di quale versione, ma io uso 1.3.14 e puoi semplicemente usare:

window.location.href = '/employee/1';

Non è necessario iniettare $locationo $windownel controller e non è necessario ottenere l'indirizzo host corrente.

— CularBytes
fonte

-11

Devi mettere:

< html ng-app = "urlApp" ng-controller = "urlCtrl">

In questo modo la funzione angolare può accedere all'oggetto "finestra"

— Efrain Luna Villafuerte
fonte

Non aver paura!

— Mika