AngularJs基于角色的前端访问控制的实现
最近做的项目是使用Angular做一个单页应用,但因为用户有不同的角色(管理员、编辑、普通财务人员等),所以需要进行不同角色的访问控制。
因为后端访问控制的经验比较丰富,所以这里只记录了前端访问控制的实现。请注意,前端最多只能做到显示控制!并不能保证安全,所以后端是一定要做访问控制的!
基于角色的访问控制需要做到两个层面的访问控制:
- 控制页面路由的跳转,没有权限的用户不能跳转到指定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){ varroles=[];//从后端数据库获取的角色表 //从后端获取的角色权限Url映射表,结构为{"role":["/page1","/page2"……]} varurlPermissions={}; //去后端获取 (function(){ //此处为测试方便,直接赋值了,下面也仅以示例为目的,尽量简单了 roles=["admin","user"] urlPermissions={ //管理员可以访问所用页面 "admin":["*"], //普通用户可以访问page路径下的所有界面(登录、注册等页面)以及系统主页 "user":["page.*","app.index","app.detail"] } })(); functionconvertState(state){ returnstate.replace(".","\\\.").replace("*",".*"); } return{ //是否有访问某url的权限 isAccessUrl:function(url){ varuser=$sessionStorage.USER; for(varroleinroles){ if(user.role.toLowerCase()==roles[role].toLowerCase()){ console.log(urlPermissions[roles[role]]) for(iinurlPermissions[roles[role]]){ varregx=eval("/"+convertState(urlPermissions[roles[role]][i])+"/"); console.log(regx+""+url) if(regx.test(url)){ returntrue; } } } } returnfalse; } } }])
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)){ //查看是否需要登录: varuser=$sessionStorage.USER; if(user==null){ event.preventDefault(); $state.go("page.login"); return; } event.preventDefault(); $state.go("page.error"); } }); }])
好了,现在就实现了url的访问控制。
页面元素的显示控制
至于第二点,我的解决方案是自定义指令,下面是示例:
<divzg-access="TEST_ACCESS"></div>
注意,这里传入的不是角色,而是权限。因为用户角色是可以动态扩展的,如果这里写的是什么样的角色才可以访问这个元素,那以后每新增一个角色都将是一个很大很大的麻烦,因为你得一个个来修改代码。下面是自定义指令zg-access的代码:
/** *元素级别的访问控制指令 */ App.directive("zgAccess",function($sessionStorage,$http){ varroles=[];//角色 varelemPermissions={};//角色元素权限映射表,如{"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,共三种状态 varlevel="none"; console.log(attr) if(attr&&attr["zgAccessLevel"]){ level=attr["zgAccessLevel"]; } switch(level){ case"none":element.hide();break; case"disabled": element.attr("disabled",""); break; } //获取元素权限 varaccess=attr["zgAccess"]; //将此权限上传到后端的数据库 (function(){ //upload })(); returnfunction(scope,element){ //判断用户有无权限 varuser=$sessionStorage.USER; if(user==null||angular.equals({},user)){ user={}; user.role="visitor"; } varrole=user.role.toLowerCase(); console.log(roles); for(variinroles){ vartmp=roles[i].toLowerCase(); if(role==tmp){ tmp=elemPermission[role]; console.log(tmp) for(varjintmp){ console.log(tmp[j]+""+access); if(access.toLowerCase()==tmp[j].toLowerCase()){ element.removeAttr("disabled"); element.show(); } } } } }; } } })
zgAccessLevel是一个属性,用来控制级别,如果是none(默认为none),就不显示元素;如果是disbaled,就是元素不可用(如Button不可用)。
下面是元素示例:
<buttonng-click=""zg-access="SEARCH"zg-access-level="disabled">Search</button>
此时,若以admin角色或者user角色登录,Search按钮将不可用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。