当前位置: 首页 > 科技观察

AngularJS-GUI

时间:2023-03-11 20:34:22 科技观察

实现基于角色的访问控制这几天忙于应用的前端工作,主要使用angular来做。最近的一个要求是基于角色的GUI访问。一个用户可以有多个角色,他应该只能访问他被授权访问的GUI部分。我们主要通过两个层面限制应用程序的GUI访问来解决上述需求:一个用户只能访问授权给他的页面(或流量)。在一个页面上,用户只能看到授权给他的部分。解决上面的需求1,我们捕获路由变化事件,检查每一次路由变化,看用户是否有权限访问下一个路由,保证他不会看到拒绝访问的页面$rootScope.$on("$routeChangeStart",function(event,next,current){if(!authService.isUrlAccessibleForUser(next.originalPath))$location.path('/authError');});上面的authService是我们创建的一个服务,它有角色用户列表和路由流量到授权用户。函数isUrlAccessibleForUser()将检查分配的用户是否可以访问给定的流量并返回true或false。服务会从后台和路由访问信息中获取一个用户的角色列表,每个角色都会保存在服务自身的一个Map集合中。(一些用户和角色的详细信息可以存储在数据中心,通过后台获取)app.factory('authService',function($http){varuserRole=[];//从后台获取'/dashboard','/about-us','/authError'],'ROLE_USER':['/usersettings','/usersettings/personal','/authError']};return{userHasRole:function(role){for(varj=0;j……

如果用户具有ROLE_ADMIN角色,则将上述html标签加载到html页面中,否则从页面中删除此Html标记。该指令的实现代码如下:.directive('myAccess',['authService','removeElement',function(authService,removeElement){return{restrict:'A',link:function(scope,element,attributes){varhasAccess=false;varallowedAccess=attributes.myAccess.split("");for(i=0;i