Verwirrend $locationChangeSuccess und $stateChangeStart

Ich würde vorschlagen, zu gehen, mehr "UI-Router Weg". Wir sollten Sie nutzen $rootScope.$on('$stateChangeStart' Veranstaltung, wo $state.current wäre richtig gestellt. Hier ist ein funktionierendes Beispiel

Let ' s beobachten einfache (aber nicht naiv) Lösung, die erweitert werden könnte, um jedes Grad höher. Auch wenn Sie diesen Ansatz möchten, hier ist viel mehr umfassende Umsetzung: angular-ui-router-login-Authentifizierung

Erstens, wir haben unser user-service wie folgt definiert:

.factory('userService', function ($timeout, $q) {

    var user = undefined;

    return {
        //async way how to load user from Server API
        getAuthObject: function () {
            var deferred = $q.defer();

            //later we can use this quick way -
            //- once user is already loaded
            if (user) {
                return $q.when(user);
            }

            //server fake call, in action would be $http
            $timeout(function () {
                //server returned UN authenticated user
                user = {isAuthenticated: false };
                //here resolved after 500ms
                deferred.resolve(user)
            }, 500)

            return deferred.promise;
        },

        //sync, quick way how to check IS authenticated...
        isAuthenticated: function () {
            return user !== undefined
                && user.isAuthenticated;
        }
    };    
})

So, wir verwenden async (hier $timeout) zu laden user Objekt bilden ein server. In unserem Beispiel wird es eine Eigenschaft, die {isAuthenticated: false }, die verwendet werden, um zu überprüfen, ob authentifiziert ist.

Dort ist auch der sync-Methode isAuthenticated() welche, bis der Benutzer geladen wird und erlaubt - immer wieder false.

Und das wäre, dass unsere Hörer von der '$stateChangeStart' Veranstaltung:

.run(['$rootScope', '$state', 'userService',
 function ($rootScope, $state, userService) {

     $rootScope.$on('$stateChangeStart', function (event, toState,   toParams
                                                        , fromState, fromParams) {    
        //if already authenticated...
        var isAuthenticated = userService.isAuthenticated();
        //any public action is allowed
        var isPublicAction = angular.isObject(toState.data)
                           && toState.data.isPublic === true;    

        if (isPublicAction || isAuthenticated) {
          return;
        }

        //stop state change
        event.preventDefault();

        //async load user 
        userService
           .getAuthObject()
           .then(function (user) {

              var isAuthenticated = user.isAuthenticated === true;

              if (isAuthenticated) {
                //let's continue, use is allowed
                $state.go(toState, toParams)
                return;
              }    
              //log on /sign in...
              $state.go("login");
           })
       ...

Was wir prüfen zuerst, ist, wenn der Benutzer bereits geladen und authentifiziert (var isAuthenticated = ...). Als Nächstes werden wir geben, grün zu jeder öffentlichen Methode. Dies geschieht mit der data {} Eigentum des Staates, der Objekt-definition (siehe Befestigen Sie Benutzerdefinierte Daten an Staatliche Objekte)

Und das ist es. Im Falle von Staaten, definiert wie in einem unten snippet, das wir erleben können:

• die 'public', 'home' dürfen niemanden
• die 'private', 'private' wird redirect auf login, wenn isAuthenticated === false

• den 'login' in diesem Beispiel liefert eine schnelle Art und Weise, wie die Umstellung isAuthenticated on/off

  //States
  $stateProvider
  
    //public
    .state('home', {
        url: "/home",
        templateUrl: 'tpl.html',
        data: { isPublic: true },
    })
    .state('public', {
        url: "/public",
        templateUrl: 'tpl.html',
        data: { isPublic: true },
    })
    //private
    .state('private', {
        url: "/private",
        templateUrl: 'tpl.html',
    })
    .state('private2', {
        url: "/private2",
        templateUrl: 'tpl.html',
    })
  
    //login
    .state('login', {
        url: "/login",
        templateUrl: 'tpl.html',
        data: { isPublic: true },
        controller: 'loginCtrl',
    })

Überprüfen Sie, dass alle hier

Einige andere Ressourcen:

• angular-ui-router-login-Authentifizierung
• Angular-UI-Router: verschachtelte Staaten für zu Hause zu unterscheiden, eingeloggt und ausgeloggt
• anderen Zustand data und Authentifizierung

InformationsquelleAutor Radim Köhler