Angular ui-router:如何防止进入某个状态
Angular ui-router: how to prevent access to a state
您好,我是 angularJS 的新手,一直在尝试根据用户标准阻止访问某些状态。
This, from ui-router's FAQ 准确描述了我想做什么,但我无法让它正常工作。除了在数据对象中我还需要什么来完成这个?
(我看到有人在一些博客 post 教程中投入 "true" 并像我一样使用它,但这似乎不起作用,因为我收到一个错误,说 needAdmin is not defined )
这是我的代码:
angular.module('courses').config(['$stateProvider',
function($stateProvider) {
// Courses state routing
$stateProvider.
state('listCourses', {
url: '/courses',
templateUrl: 'modules/courses/views/list-courses.client.view.html'
}).
state('createCourse', {
url: '/courses/create',
templateUrl: 'modules/courses/views/create-course.client.view.html',
data: {
needAdmin: true
}
}).
state('viewCourse', {
url: '/courses/:courseId',
templateUrl: 'modules/courses/views/view-course.client.view.html'
}).
state('editCourse', {
url: '/courses/:courseId/edit',
templateUrl: 'modules/courses/views/edit-course.client.view.html',
data: {
needAdmin: true
}
});
}
]);
angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) {
$rootScope.$on('$stateChangeStart', function(e, to) {
var auth = Authentication;
console.log(auth.user.roles[0]);
if (to.data.needAdmin && auth.user.roles[0] !== 'admin') {
e.preventDefault();
$state.go('/courses');
}
});
}]);
如果一个州没有data
,那么to.data
是未定义的。试试这个:
if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') {
我发现最好的方法是使用 resolve:
$stateProvider.
state('createCourse', {
url: '/courses/create',
templateUrl: 'modules/courses/views/create-course.client.view.html',
resolve: {
security: ['$q', function($q){
if(/*user is not admin*/){
return $q.reject("Not Authorized");
}
}]
}
});
这将触发错误,阻止用户在不允许的情况下访问此状态。
如果您需要显示错误,或将用户转到不同的状态,请处理 $stateChangeError 事件:
$rootScope.$on('$stateChangeError', function(e, toState, toParams, fromState, fromParams, error){
if(error === "Not Authorized"){
$state.go("notAuthorizedPage");
}
如果您想检查所有状态的管理员访问权限,您可以使用装饰器将解析添加到所有状态。像这样:
$stateProvider.decorator('data', function(state, parent){
var stateData = parent(state);
var data = stateData.data || {};
state.resolve = state.resolve || {};
if(data.needAdmin){
state.resolve.security = ['$q', function($q){
if(/*user is not admin*/){
return $q.reject("Not Authorized");
}
}];
return stateData;
});
我为我当前的应用程序实现了类似的东西。如果用户未登录,我们将用户转发到登录表单。如果非管理员用户尝试进入任何管理员状态,我们将转到错误页面。
您好,我是 angularJS 的新手,一直在尝试根据用户标准阻止访问某些状态。
This, from ui-router's FAQ 准确描述了我想做什么,但我无法让它正常工作。除了在数据对象中我还需要什么来完成这个?
(我看到有人在一些博客 post 教程中投入 "true" 并像我一样使用它,但这似乎不起作用,因为我收到一个错误,说 needAdmin is not defined )
这是我的代码:
angular.module('courses').config(['$stateProvider',
function($stateProvider) {
// Courses state routing
$stateProvider.
state('listCourses', {
url: '/courses',
templateUrl: 'modules/courses/views/list-courses.client.view.html'
}).
state('createCourse', {
url: '/courses/create',
templateUrl: 'modules/courses/views/create-course.client.view.html',
data: {
needAdmin: true
}
}).
state('viewCourse', {
url: '/courses/:courseId',
templateUrl: 'modules/courses/views/view-course.client.view.html'
}).
state('editCourse', {
url: '/courses/:courseId/edit',
templateUrl: 'modules/courses/views/edit-course.client.view.html',
data: {
needAdmin: true
}
});
}
]);
angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) {
$rootScope.$on('$stateChangeStart', function(e, to) {
var auth = Authentication;
console.log(auth.user.roles[0]);
if (to.data.needAdmin && auth.user.roles[0] !== 'admin') {
e.preventDefault();
$state.go('/courses');
}
});
}]);
如果一个州没有data
,那么to.data
是未定义的。试试这个:
if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') {
我发现最好的方法是使用 resolve:
$stateProvider.
state('createCourse', {
url: '/courses/create',
templateUrl: 'modules/courses/views/create-course.client.view.html',
resolve: {
security: ['$q', function($q){
if(/*user is not admin*/){
return $q.reject("Not Authorized");
}
}]
}
});
这将触发错误,阻止用户在不允许的情况下访问此状态。
如果您需要显示错误,或将用户转到不同的状态,请处理 $stateChangeError 事件:
$rootScope.$on('$stateChangeError', function(e, toState, toParams, fromState, fromParams, error){
if(error === "Not Authorized"){
$state.go("notAuthorizedPage");
}
如果您想检查所有状态的管理员访问权限,您可以使用装饰器将解析添加到所有状态。像这样:
$stateProvider.decorator('data', function(state, parent){
var stateData = parent(state);
var data = stateData.data || {};
state.resolve = state.resolve || {};
if(data.needAdmin){
state.resolve.security = ['$q', function($q){
if(/*user is not admin*/){
return $q.reject("Not Authorized");
}
}];
return stateData;
});
我为我当前的应用程序实现了类似的东西。如果用户未登录,我们将用户转发到登录表单。如果非管理员用户尝试进入任何管理员状态,我们将转到错误页面。