angular的前端权限控制
service
- authorityService以及路由跳转控制
angular.module('frontierApp')
.run(['$rootScope', '$state', '$cookieStore', 'userInfoService', function ($rootScope, $state, $cookieStore, userInfoService) {
//权限控制开关,true:权限控制有效;false:权限控制将失效,一般本地调试时可以设置为false
$rootScope.privilegeStart = true;
if ($rootScope.privilegeStart) {
$rootScope.$on("$stateChangeStart", function (evt, next, o, current) {
if (next.name == "login")return;
//受到权限控制的路由
if (next.authority) {
var userAuthorityList = userInfoService.getUserAutorityList();
if (userAuthorityList) {
//如果当前路由查询到权限code,判断用户是否具有访问权限
var hasAuthority = false;
for (var i = 0; i < userAuthorityList.length; i++) {
if (next.authority.code == userAuthorityList[i].name) {
hasAuthority = true;
break;
}
}
//如果用户没有权限,提示用户,并返回欢迎页路由
if (hasAuthority == false) {
// $rootScope.messageBox.show("当前用户没有<" + next.authority.page + ">页面访问权限", "WARNING");
$("#noAMsgBoxMsg").html("当前用户没有<" + next.authority.page + ">页面访问权限");
$('#noAMsgBox').modal();
evt.preventDefault();
}
} else {
var localStorage = window.localStorage;
localStorage.removeItem('userInfo');
$cookieStore.remove("userInfo");
$rootScope.messageBox.show("您还没有登陆,请登陆", "WARNING");
// 中断路由跳转
evt.preventDefault();
$state.go("login");
}
}
})
}
}])
.factory('authorityService', [ '$rootScope', 'userInfoService',
function ($rootScope, userInfoService) {
var service = {
check : function(authorityCode){
if($rootScope.privilegeStart){
var userAuthorityList = userInfoService.getUserAutorityList();
if (!userAuthorityList){
return false;
}
for (var i = 0; i < userAuthorityList.length; i++) {
if (userAuthorityList[i].name == authorityCode) {
return true;
}
}
}
}
}
return service ;
}
])
- rootScope绑定service,在rootController中直接注入authorityService
controller('RootController',['$rootScope', 'authorityService',
function ($rootScope, authorityService) {
$rootScope.authorityService = authorityService;
}
])
受控的页面元素
<span ng-if="authorityService.check('A001')" ui-sref="systemUserManage">系统人员管理</span>
路由控制
这里的路由跳转使用的是angular-ui的ui-router,所以这里监听的路由跳转事件来自ui-router注册。
受控路由配置
这里用的是 ui-router 替换了angular-router。
angular.module('myApp.systemUserManage', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('systemUserManage', {
url: '/systemUserManage',
views: {
templateUrl: 'modules/systemUserManage/systemUserManage_view.html',
controller: 'SystemUserManageController'
},
//受控制的路由配置,权限code与后台返回的用户权限code对应
authority: {code: "A005", page: "账户管理"}
})
}])
controller中的使用
有些时候需要在controller中判断某些操作是否具有权限
controller(function($rootScope){
if($rootScope.authorityService.check('A001')){
....
}
})