AngularJs基于角色的前端访问控制的实现


Posted in Javascript onNovember 07, 2016

最近做的项目是使用Angular做一个单页应用,但因为用户有不同的角色(管理员、编辑、普通财务人员等),所以需要进行不同角色的访问控制。

因为后端访问控制的经验比较丰富,所以这里只记录了前端访问控制的实现。请注意,前端最多只能做到显示控制!并不能保证安全,所以后端是一定要做访问控制的!

基于角色的访问控制需要做到两个层面的访问控制:

  1. 控制页面路由的跳转,没有权限的用户不能跳转到指定url
  2. 页面元素的显示控制,没有对应权限的用户不能看到该元素

但在此之前,我们还有一项重要的事要做。

存储用户信息

首先我们要做的,并不是和访问控制有关的事,首先我们要保存好用户信息。包括用户的基本信息,如用户名、真实姓名;以及用户角色。下面是数据结构:

user = {
  username:"",
  realname:"",
  role:""
}

存储的时候就将整个user存储,但存在哪里呢?考虑到必须在任何页面都可以访问到,第一反应是存储到rootScope中,但我们应该尽量避免使用rootScope;除此之外,我们可以存储在顶级的controller或者是全局的constant中,这两种解决方案都可以,但它们的问题就是一旦页面刷新,就不管用了($rootScope也一样)。考虑到user这个变量的生命周期应该要与session相同,所以,我使用了SessionStorage。

在创建controller时,需要加入$sessionStorage:

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

在登录成功后,将user存储到SessionStorage中:

$sessionStorage.USER = user;

好了,之后通过$sessionStorage就可以获取到用户信息了。

user = $sessionStorage.USER;

控制页面路由的跳转

下面我们开始实现第一点:控制页面路由的跳转。

要做到第一点比较容易,Angular路由改变时会触发$stateChangeStart事件(我用的是stateProvider,所以监听stateChangeStart,如果是用的route或是location,应该监听它们对应的事件),监听此事件,在里面根据访问的url以及用户角色进行权限判断,比如登录的判断就可以在里面做,访问那个url需要登录就直接跳转到登录界面。

首先先写一个auth服务,用于权限认证:

/**
 * 基于角色的访问控制
 */
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;
   }
  }

}])

roles是角色,从后台获取;urlPermissions是每个角色对应的能被其访问的url列表,也从后台获取,可通过后台配置。这样,每次新增角色,我们就可以动态为其配置访问权限。

最重要的是isAccessUrl方法,传入url后,isAccessUrl首先会通过$sessionStorage获取用户信息,取得用户角色,然后看用户角色是否在角色表中;若在角色表中,就看此角色是否有访问url的权限。我们在后台配置的时候,是直接指定状态,但如果没有通配符的话,那么每一个页面都得写一个url,所以,就增加了通配符 功能,然后将url列表中的每个url转化为正则表达式,再来验证,这样配置就灵活了很多。

最后是在run中监听事件$stateChangeStart :

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"); 
  }
});
}])

好了,现在就实现了url的访问控制。

页面元素的显示控制

至于第二点,我的解决方案是自定义指令,下面是示例:

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

注意,这里传入的不是角色,而是权限。因为用户角色是可以动态扩展的,如果这里写的是什么样的角色才可以访问这个元素,那以后每新增一个角色都将是一个很大很大的麻烦,因为你得一个个来修改代码。下面是自定义指令zg-access的代码:

/**
 * 元素级别的访问控制指令
 */

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();
        } 
       }
      }
     }
    };
   }
 }
})

zgAccessLevel是一个属性,用来控制级别,如果是none(默认为none),就不显示元素;如果是disbaled,就是元素不可用(如Button不可用)。

下面是元素示例:

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

此时,若以admin角色或者user角色登录,Search按钮将不可用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 #Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 #Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 #Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 #Javascript
jquery文字填写自动高度的实现方法
Nov 07 #Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 #Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 #Javascript
You might like
PHP的几个常用加密函数
2016/02/03 PHP
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python 连接各类主流数据库的实例代码
2018/01/30 Python
python实现k-means聚类算法
2018/02/23 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
汽车驾驶求职信
2013/10/25 职场文书
高级销售求职信
2014/02/21 职场文书
家长会主持词
2014/03/26 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python