Angularjs ui-enrutador Cómo redirigir a la página de inicio de sesión

Tengo 4 estados: tablero de instrumentos , dahboard.main , dashboard.minor , inicio de sesión . el tablero es abstracto y es un estado padre para los estados .minor y .main. A continuación está mi código:

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

Como puede ver en el panel de control, tengo la opción de resolver. Con esto, me gustaría redirigir al usuario a la página de inicio de sesión si no está autorizado. Por este motivo, uso el servicio especial 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 }; }]); 

Verifico el valor de autenticación en 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'); } }); }); 

Pero, desafortunadamente, cuando voy al estado de mi sitio web raíz o tablero, aparece una página vacía. ¿Qué está mal con este código? ¡Gracias!

El punto es que no se redirija si no se necesita === si ya se redirigió al estado deseado. Hay un plunker que funciona con una solución similar

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

Verifique esto para una explicación similar:

  • Enrutador ui angular: la redirección no funciona en absoluto
  • ¿Cómo puedo arreglar el ‘Tamaño máximo de stack de llamadas excedido’ AngularJS

Dado que está utilizando el módulo UI-Router, debe usar $stateChangeStart , $stateChangeSuccess .

Consulte este enlace para obtener más información: https://github.com/angular-ui/ui-router/issues/17

También hay un error tipográfico en consol.log(userInfo) en la consola .

Verifique la consola en sus herramientas chrome-dev-tools. Dará una idea si falta algo más.

Tenga en cuenta que en realidad el evento $stateChangeSuccess está en desuso y ya no está disponible en el paquete angular-ui-route . Ahora, este comportamiento lo manejan transition hooks . Puede lograr su propósito usando $transitions.onStart siguiente manera:

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