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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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 获取全局变量的代码
2011/04/21 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python处理PDF与CDF实例
2020/02/26 Python
基于Python的OCR实现示例
2020/04/03 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
做一个有道德的人演讲稿
2014/05/14 职场文书
农村文化活动总结
2014/08/28 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
放假通知怎么写
2015/08/18 职场文书