angular实现权限控制路由
前端去实现下根据数据开控制路由,我感觉挺扯淡的,但是公司既然有需求,那我们的设计就要跟着需求走。下面是我实现权限控制路由的一种方法。
解决的思路:
1.首先从后台获取该用户的权限
2.建立一个server,用来判断权限数组里是否有此权限
3.根据权限来显示路由
1.自定义服务
angular.module("manage.common")
.factory('permissions', function($rootScope) {
var permissionList = $rootScope.permissionList;
return {
isPermission: function(permission) {
if (permission) {
if (typeof(permission) == "string") {
if (permissionList.indexOf(permission) > -1) {
return true;
}
}
}
return false;
}
};
});
2.定义全局的方法
$rootScope.isPermission = function(id) {
return permissions.isPermission(id);
}
3.路由权限控制
app.run(function($rootScope, $location,$state, permissions) {
$rootScope.isPermission = function(id) {
return permissions.isPermission(id);
}
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
var permission = toState.permission;
if (toState.name!="login"&&!permissions.hasPermission(permission)) {
event.preventDefault();
$state.go("login");
}
});
});
4.路由控制
.state("information.goods", {
url: "/goods",
templateUrl: "information/templates/goods.html",
controller: 'information.goods',
permission: 'C4'//权限的id
})
5.页面路由控制
<li class="nav-item" ng-class="{'router_checked':currentTab.search('backstage.concierge') >= 0}" ng-show="isPermission('C4')">
<a class="route" ui-sref='backstage.concierge'>
管理员管理
</a>
</li>