使用angular 实现简单 用户-角色-菜单-按钮权限控制

这个是用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中获取用户，就可以拿出用户对应的角色->菜单-权限.