I have 4 states: dashboard, dahboard.main, dashboard.minor, login. dashboard is abstract and it is a parent state for .minor and .main states. Below is my code:
我有四种状态:仪表板、大菱牌。主要,仪表板。小,登录。仪表板是抽象的,它是.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' }
})
As you see in dashboard state I have resolve option. By this I would like to redirect user to login page if he is not authorized. For this reason I use special authenticationSvc service:
正如您在仪表板状态中看到的,我有resolve选项。如果用户没有被授权,我想将他重定向到登录页面。为此,我使用了特殊认证服务:
.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 auth value in config :
我在config中检查auth值:
.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');
}
});
});
But unfortunately when I go to my website root or dashboard state I get an empty page. What is wrong with this code? Thanks!
但不幸的是,当我访问我的网站根目录或仪表板状态时,我得到了一个空页面。这段代码有什么问题?谢谢!
3 个解决方案
#1
76
The point is, do not redirect if not needed === if already redirected to intended state. There is a working plunker with similar solution
关键是,如果不需要=== =,不要重定向到预定状态。有一个工作柱塞与类似的解决方案
.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
}
});
});
Check these for similar explanation:
检查这些类似的解释:
- Angular ui router - Redirection doesn't work at all
- 角ui路由器-重定向根本不起作用
- How can I fix 'Maximum call stack size exceeded' AngularJS
- 如何修复“最大调用堆栈大小超过”AngularJS
#2
4
Since you are using UI-Router module, you should be using $stateChangeStart
, $stateChangeSuccess
events.
因为您正在使用UI-Router模块,所以应该使用$stateChangeStart、$stateChangeSuccess事件。
Check this link for more: https://github.com/angular-ui/ui-router/issues/17
查看此链接获得更多信息:https://github.com/angular-ui/ui-router/issues es/17
Also there is a typo in consol.log(userInfo)
in console.
在console. log(userInfo)中还有一个输入错误。
Check the console in your chrome-dev-tools. It will give idea if something else is missing.
检查您的chromebook -dev-tools中的控制台。如果缺了什么东西,它就会给你灵感。
#3
0
Beware that actually $stateChangeSuccess
event is deprecated and no longer available in angular-ui-route
package. Now, this behavior is handled by transition hooks
. You could achieve your purpose using $transitions.onStart
as follows:
注意,实际上$stateChangeSuccess事件已被弃用,在angular-ui-route包中不再可用。现在,这个行为由转换钩子处理。您可以使用$transition实现您的目的。onStart如下:
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
}
});
}
#1
76
The point is, do not redirect if not needed === if already redirected to intended state. There is a working plunker with similar solution
关键是,如果不需要=== =,不要重定向到预定状态。有一个工作柱塞与类似的解决方案
.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
}
});
});
Check these for similar explanation:
检查这些类似的解释:
- Angular ui router - Redirection doesn't work at all
- 角ui路由器-重定向根本不起作用
- How can I fix 'Maximum call stack size exceeded' AngularJS
- 如何修复“最大调用堆栈大小超过”AngularJS
#2
4
Since you are using UI-Router module, you should be using $stateChangeStart
, $stateChangeSuccess
events.
因为您正在使用UI-Router模块,所以应该使用$stateChangeStart、$stateChangeSuccess事件。
Check this link for more: https://github.com/angular-ui/ui-router/issues/17
查看此链接获得更多信息:https://github.com/angular-ui/ui-router/issues es/17
Also there is a typo in consol.log(userInfo)
in console.
在console. log(userInfo)中还有一个输入错误。
Check the console in your chrome-dev-tools. It will give idea if something else is missing.
检查您的chromebook -dev-tools中的控制台。如果缺了什么东西,它就会给你灵感。
#3
0
Beware that actually $stateChangeSuccess
event is deprecated and no longer available in angular-ui-route
package. Now, this behavior is handled by transition hooks
. You could achieve your purpose using $transitions.onStart
as follows:
注意,实际上$stateChangeSuccess事件已被弃用,在angular-ui-route包中不再可用。现在,这个行为由转换钩子处理。您可以使用$transition实现您的目的。onStart如下:
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
}
});
}