Angularjs ui-router。 如何redirect到login页面

我有4个状态： 仪表板 ， dahboard.main ， dashboard.minor ， login 。 仪表板是抽象的，它是.minor和.main状态的父状态。 以下是我的代码：

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

正如您在仪表板状态中看到的，我有解决scheme选项。 通过这个我想redirect用户login页面，如果他没有被授权。 出于这个原因，我使用特殊的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 }; }]); 

我检查configuration中的身份validation值：

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

但不幸的是，当我去我的网站的根或仪表板的状态，我得到一个空的网页。 这段代码有什么问题？ 谢谢！

Answer 1

重点是，不要redirect，如果不需要===如果已经redirect到预期的状态。 有一个类似的解决scheme的工作plunker

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

检查这些相似的解释：

• Angular UI路由器 – redirect根本不起作用
• 我该如何解决“超出最大调用堆栈大小”的AngularJS

Answer 2

由于您使用的是UI-Router模块，因此您应该使用$stateChangeStart ， $stateChangeSuccess事件。

查看更多链接： https : //github.com/angular-ui/ui-router/issues/17

在控制台中还有一个consol.log(userInfo)input错误。

在你的chrome-dev-tools中检查控制台。 它会给出想法，如果有其他东西丢失。