这个是用angular 控制前端按钮权限的一个例子。也没什么权限框架来做,纯属小项目中原创使用
先说一下,设计的表结构。
用户表,角色表,菜单表,按钮权限表,
用户与角色 多对1
角色与菜单多对多
菜单与按钮权限多对多
角色与于按钮权限多对多。
按钮必须归属于一个菜单下,设置有默认启动字段,代表拥有菜单是否默认拥有这个按钮权限。角色与按钮多对多就是为了解决这个问题。
1.首先配置路由器将菜单的映射url 传至各个控制层
.state("app.Manage", {
url: "/Manage",
templateUrl: "views/pages/Manage.html",
controller: "Manage",
resolve: {
deps: ['$ocLazyLoad','$q',
function($ocLazyLoad,$q){
return $q.all([
$ocLazyLoad.load('ui.select'),
]);
}],
menu_url: function() {
return "app.Manage";
}
}
}
2.接下来控制层接收
app.controller('examineeManage', ['$scope', '$http', '$state', '$rootScope', '$stateParams', '$location', '$timeout', '$modal', 'uiUploader', '$log','menu_url',
function($scope, $http, $state, $rootScope, $stateParams ,$location, $timeout, $modal, uiUploader, $log,menu_url) {
3.然后请求 后台获取 当前登录用户在该菜单下所拥有的按钮权限
并 循环拿出属性放至scope 中,(后台处理如果有该权限,值为true,如果没有为false。如:“add”:“true”,“delete”:“false”)
$scope.initUserFunction = function(){
var obj={};
obj.menu_url = menu_url;
$http.post('/get_user_function', angular.toJson(obj)).then(function(response){
var obj = response.data;
for(var s in obj){
$scope[s] = obj[s];
}
},
function(x){
alert('获取权限出错');
})
}
4.页面使用 ng-show,ng-if,ng-disable 等控制该按钮
<botton ng-show="examinee_add">添加</botton>
注:后台可以使用菜单映射地址也就是menuUrl 查到相应的菜单。加上session中获取用户,就可以拿出用户对应的角色->菜单-权限.