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