Angularjs UI-Router. Wie umleiten zur Login-Seite

Question

Ich habe 4 Zustände: Armaturenbrett, dahboard.main, dashboard.minor, Login. Armaturenbrett ist abstrakt, und es ist ein Elternteil Zustand für .minor und .main Staaten. Unten ist mein Code:

.state('dashboard', { 
     url: "/dashboard", 
     abstract: true, 
     templateUrl: "views/dashboard.html", 
     resolve: { 
      auth: function ($q, authenticationSvc) { 
       var userInfo = authenticationSvc.getUserInfo(); 
       if (userInfo) { 
        return $q.when(userInfo); 
       } else { 
        return $q.reject({ authenticated: false }); 
       } 
      } 
     }, 
     controller: "DashboardCtrl", 
     data: { pageTitle: 'Example view' } 
    }) 
    .state('dashboard.main', { 
     url: "", 
     templateUrl: "views/main.html", 
     controller: "DashboardCtrl", 
     data: { pageTitle: 'Main view' } 
    }) 

Wie Sie im Armaturenbrett Zustand sehen habe ich resolve Option. Hiermit möchte ich den Benutzer zur Anmeldeseite umleiten, wenn er nicht autorisiert ist. Aus diesem Grund verwende ich spezielle authenticationSvc Service:

.factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) { 
    var userInfo; 

    function login(email, password) { 
     var deferred = $q.defer(); 

     $http.post("/api/login", { email: email, password: password }) 
      .then(function (result) { 
       if(result.data.error == 0) { 
        userInfo = { 
         accessToken: result.data.accessToken 
        }; 
        $window.sessionStorage["userInfo"] = JSON.stringify(userInfo); 
        deferred.resolve(userInfo); 
       } 
       else { 
        deferred.reject(error); 
       } 
      }, function (error) { 
       deferred.reject(error); 
      }); 

     return deferred.promise; 
    } 
    function getUserInfo() { 
     return userInfo; 
    } 
    return { 
     login: login, 
     logout: logout, 
     getUserInfo: getUserInfo 
    }; 
}]); 

ich überprüfen Auth Wert in Config:

.run(function($rootScope, $location, $state) { 
    $rootScope.$state = $state; 
    $rootScope.$on("routeChangeSuccess", function(userInfo) { 
     consol.log(userInfo); 
    }); 
    $rootScope.$on("routeChangeError", function(event, current, previous, eventObj) { 
     if(eventObj.authenticated === false) { 
      $state.go('login'); 
     } 
    }); 
}); 

Aber leider, wenn ich auf meiner Website Wurzel oder dem Armaturenbrett Zustand gehen erhalte ich eine leere Seite. Was ist falsch an diesem Code? Vielen Dank!

Answer 1

Der Punkt ist, leitet nicht, wenn === nicht erforderlich, wenn bereits beabsichtigten Zustand umgeleitet. Es gibt a working plunker mit ähnlichen Lösung

.run(function($rootScope, $location, $state, authenticationSvc) { 


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

     var isLogin = toState.name === "login"; 
     if(isLogin){ 
      return; // no need to redirect 
     } 

     // now, redirect only not authenticated 

     var userInfo = authenticationSvc.getUserInfo(); 

     if(userInfo.authenticated === false) { 
      e.preventDefault(); // stop current execution 
      $state.go('login'); // go to login 
     } 
    }); 
}); 

Schauen Sie sich diese für ähnliche Erklärung:

• Angular ui router - Redirection doesn't work at all
• How can I fix 'Maximum call stack size exceeded' AngularJS

Answer 2

Da Sie das UI-Router-Modul verwenden, sollten Sie $stateChangeStart, $stateChangeSuccess Ereignisse verwenden.

prüfen Link für mehr: https://github.com/angular-ui/ui-router/issues/17

Auch gibt es ein Tippfehler in consol.log(userInfo) in Konsole.

Überprüfen Sie die Konsole in Ihrem Chrome-Entwickler-Tools. Es wird eine Idee geben, wenn etwas anderes fehlt.

Answer 3

Beachten Sie, dass tatsächlich $stateChangeSuccess Ereignis veraltet und nicht mehr verfügbar in angular-ui-route p ackage. Jetzt wird dieses Verhalten von transition hooks behandelt. Sie könnten Ihren Zweck $transitions.onStart mit erreichen wie folgt:

run.$inject = ['$transitions', 'authenticationSvc']; 
function run($transitions, authenticationSvc) { 

    $transitions.onStart({}, function (trans) { 
    var userInfo = authenticationSvc.getUserInfo(); 

    var $state = trans.router.stateService; 

    if(userInfo.authenticated === false) { 
     $state.go('login'); // go to login 
    } 
    }); 
}