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

本文涉及的产品
访问控制,不限时长
简介:

Github 项目地址 https://github.com/zgljl2012/angular-permission

最近做的项目是使用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按钮将不可用。

转载请注明原文地址 http://www.zgljl2012.com/2016/08/16/angularjsshi-xian-ji-yu-jiao-se-de-qian-duan-fang-wen-kong-zhi/

Github 项目地址

相关实践学习
消息队列+Serverless+Tablestore:实现高弹性的电商订单系统
基于消息队列以及函数计算,快速部署一个高弹性的商品订单系统,能够应对抢购场景下的高并发情况。
云安全基础课 - 访问控制概述
课程大纲 课程目标和内容介绍视频时长 访问控制概述视频时长 身份标识和认证技术视频时长 授权机制视频时长 访问控制的常见攻击视频时长
目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
前端angularJs的开发过程
前端angularJs的开发过程
19 1
|
4月前
|
安全 数据安全/隐私保护 开发者
|
7月前
|
Kubernetes 数据安全/隐私保护 容器
k8s学习-CKA真题-基于角色的访问控制-RBAC
k8s学习-CKA真题-基于角色的访问控制-RBAC
217 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
350 1
|
设计模式 JavaScript 前端开发
前端框架:第一章:AngularJS
前端框架:第一章:AngularJS
182 0
前端框架:第一章:AngularJS
|
JavaScript 前端开发 IDE
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
如何从一台新电脑配置前端常用工具实现快速开发
|
前端开发
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
1236 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
|
存储 JSON JavaScript
|
JavaScript 前端开发
vue 前端实现随机背景色
vue 前端实现随机背景色
vue 前端实现随机背景色
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
435 0