搜索
首页web前端js教程AngularJs基于角色的前端访问控制的实现

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

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

控制页面路由的跳转,没有权限的用户不能跳转到指定url

页面元素的显示控制,没有对应权限的用户不能看到该元素

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

存储用户信息

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

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: &#39;A&#39;,
  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按钮将不可用。


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:学习曲线和易用性Python vs. JavaScript:学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python vs. JavaScript:社区,图书馆和资源Python vs. JavaScript:社区,图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript:所有工作方式从C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript引擎:比较实施JavaScript引擎:比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript:探索网络语言的多功能性JavaScript:探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),