Implementation of role-based front-end access control in AngularJs

app.controller('controller',['$sessionStorage', function($sessionStorage){}]);

$sessionStorage.USER = user;

user = $sessionStorage.USER;

/**
 * 基于角色的访问控制
 */
App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){
  var roles = []; // 从后端数据库获取的角色表
  // 从后端获取的角色权限Url映射表，结构为{"role":["/page1", "/page2"……]}
  var urlPermissions = {};
  // 去后端获取
  (function(){
   // 此处为测试方便，直接赋值了，下面也仅以示例为目的，尽量简单了
   roles = ["admin", "user"]
   urlPermissions = {
    // 管理员可以访问所用页面
    "admin":["*"],
    // 普通用户可以访问page路径下的所有界面（登录、注册等页面）以及系统主页
    "user":["page.*", "app.index", "app.detail"]
   }
  })();
  function convertState(state) {
   return state.replace(".", "\\\.").replace("*", ".*");
  }
  return {
   // 是否有访问某url的权限
   isAccessUrl:function(url) {
    var user = $sessionStorage.USER;
    for(var role in roles) {
     if(user.role.toLowerCase() == roles[role].toLowerCase()) {
      console.log(urlPermissions[roles[role]])
      for(i in urlPermissions[roles[role]]) {
       var regx = eval("/"+convertState(urlPermissions[roles[role]][i])+"/");
       console.log(regx+ " "+ url)
       if(regx.test(url)) {
        return true;
       }
      }
     }
    }
    return false;
   }
  }
 
}])

App.run(["$rootScope",'$state', "auth", "$sessionStorage", function($rootScope, $state, auth, $sessionStorage){
 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  // 路由访问控制
  if(toState.name!="page.login" && !auth.isAccessUrl(toState.name)) {
   // 查看是否需要登录：
   var user = $sessionStorage.USER;
   if(user == null) {
    event.preventDefault();
    $state.go("page.login");
    return;
   }
   event.preventDefault();
   $state.go("page.error");
  }
});
}])

<div zg-access="TEST_ACCESS"></div>

/**
 * 元素级别的访问控制指令
 */
 
App.directive("zgAccess", function($sessionStorage, $http){
 var roles = []; // 角色
 var elemPermissions = {}; // 角色元素权限映射表，如{ "role":{"SEARCH"}}，role有这个搜索权限
 
 // 后台获取
 (function(){
  // 简便起见，这里直接生成
  roles = ["admin", "user", "visitor"];
  elemPermission = {
   "admin":["*"],
   "user":["SEARCH"],
   "visitor":[]
  }
 })();
 console.log("zg-access");
 return {
  restrict: 'A',
  compile: function(element, attr) {
    // 初始为不可见状态none，还有 禁用disbaled和可用ok，共三种状态
    var level = "none";
    console.log(attr)
    if(attr && attr["zgAccessLevel"]) {
     level = attr["zgAccessLevel"];
    }
    switch(level) {
     case "none": element.hide(); break;
     case "disabled":
      element.attr("disabled", "");
      break;
    }
    // 获取元素权限
    var access = attr["zgAccess"];
    // 将此权限上传到后端的数据库
    (function(){
     //upload
    })();
    return function(scope, element) {
     // 判断用户有无权限
     var user = $sessionStorage.USER;
     if(user==null||angular.equals({}, user)) {
      user = {};
      user.role = "visitor";
     }
     var role = user.role.toLowerCase();
     console.log(roles);
     for(var i in roles) {
      var tmp = roles[i].toLowerCase();
      if(role == tmp) {
       tmp = elemPermission[role];
       console.log(tmp)
       for(var j in tmp){
        console.log(tmp[j]+" "+access);
        if(access.toLowerCase() == tmp[j].toLowerCase()) {
         element.removeAttr("disabled");
         element.show();
        }
       }
      }
     }
    };
   }
 }
})

<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>