sref - ui router angularjs resolve

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

Question

Tengo 4 estados: tablero , dahboard.main , dashboard.minor , inicio de sesión . el tablero es abstracto y es un estado padre para los estados .minor y .main. Abajo 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 estado del tablero, 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 esta razón, utilizo el servicio de autenticación especial PVC :

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

Compruebo el valor de autenticación en la configuración :

.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 raíz o al tablero de mi sitio web me sale una página vacía. ¿Qué está mal con este código? ¡Gracias!

Answer 1

Como está utilizando el módulo UI-Router, debería 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 de desarrollo de Chrome. Dará idea si falta algo más.

Answer 2

El punto es, no redirigir si no es necesario === 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 obtener una explicación similar:

• Enrutador ui angular: la redirección no funciona en absoluto
• ¿Cómo puedo solucionar el ''Tamaño de pila de llamadas máximo excedido''? AngularJS

Answer 3

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 es manejado por 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
}
});
}