ui-router Angularjs. Come reindirizzare alla pagina

Question

login Ho 4 stati: cruscotto, dahboard.main, dashboard.minor, login. Il pannello di controllo è astratto ed è uno stato padre per gli stati .minor e .main. Qui di seguito è il mio codice:

.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' } 
    }) 

come si vede in stato cruscotto ho opzione determinazione. Con questo vorrei reindirizzare l'utente alla pagina di accesso se non è autorizzato. Per questo motivo io uso speciale servizio authenticationSvc:

.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 
    }; 
}]); 

I check valore auth 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'); 
     } 
    }); 
}); 

Ma purtroppo quando vado al mio principale sito web o sul cruscotto stato ottengo un vuoto pagina. Cosa c'è di sbagliato con questo codice? Grazie!

Answer 1

Il punto è, non reindirizzare se non necessario === se già reindirizzato allo stato previsto. C'è a working plunker con soluzione simile

.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 
     } 
    }); 
}); 

controllare questi per la spiegazione simile:

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

Answer 2

Poiché si utilizza il modulo UI-Router, è necessario utilizzare gli eventi $stateChangeStart, $stateChangeSuccess.

Controllare questo link per maggiori: https://github.com/angular-ui/ui-router/issues/17

Inoltre v'è un errore di battitura in consol.log(userInfo) in console.

Controlla la console nei tuoi chrome-dev-tools. Darà un'idea se manca qualcos'altro.

Answer 3

Attenzione che in realtà $stateChangeSuccess evento è deprecato e non più disponibile in angular-ui-route p ackage. Ora, questo comportamento è gestito da transition hooks. Si potrebbe raggiungere il vostro scopo utilizzando $transitions.onStart come segue:

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 
    } 
    }); 
}