AngularJS – 实现基于角色访问控制的 GUI
来源:互联网 发布:淘宝详情页自动生成 编辑:程序博客网 时间:2024/06/08 20:11
点击打开链接
这些天我们忙于应用的前端工作,我们主要使用angular完成的。最近的一个需求是基于角色访问GUI。一个用户可以有多个角色,而它应只能访问授权给他的那一部分GUI。
我们主要通过在2个层次限制应用的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) { var userRole = []; // obtained from backend var userRoleRouteMap = { 'ROLE_ADMIN': [ '/dashboard', '/about-us', '/authError' ], 'ROLE_USER': [ '/usersettings', '/usersettings/personal', '/authError'] }; return { userHasRole: function (role) { for (var j = 0; j < userRole.length; j++) { if (role == userRole[j]) { return true; } } return false; }, isUrlAccessibleForUser: function (route) { for (var i = 0; i < userRole.length; i++) { var role = userRole[i]; var validUrlsForRole = userRoleRouteMap[role]; if (validUrlsForRole) { for (var j = 0; j < validUrlsForRole.length; j++) { if (validUrlsForRole[j] == route) return true; } } } return false; } };});
这将解决上述需求的第一点,对于需求的第二点我们来创建一条指令。这个指令信息类似以下:
<div my-access=”ROLE_ADMIN”>......</div>
如果用户有 ROLE_ADMIN 的这个角色的时候,将以上的html标签将被加载到html的页面中,否则将 这个 Html标签从 页面中移除。
指令的实现代码如下:
.directive('myAccess', ['authService', 'removeElement', function (authService, removeElement) { return{ restrict: 'A', link: function (scope, element, attributes) { var hasAccess = false; var allowedAccess = attributes.myAccess.split(" "); for (i = 0; i < allowedAccess.length; i++) { if (authService.userHasRole(allowedAccess[i])) { hasAccess = true; break; } } if (!hasAccess) { angular.forEach(element.children(), function (child) { removeElement(child); }); removeElement(element); } } }}]).constant('removeElement', function(element){ element && element.remove && element.remove();});
这一办法是很简洁的,而我们在GUI上很巧妙的实现了用户授权. 一个潜在的问题是,如果UI的渲染器在你从后台获取用户角色之前就已经在运行了,那么该HTML中所有带上该指令的部分都会从html中被移除掉. 这对于我们而言不是个麻烦,因为我们会在登录完成之时就获取到了用户角色的详细信息。而如果这一问题对你而言是个问题的话,解决方案可以是这样:如果用户角色还没有获取到,就只是隐藏这些html元素,仅等到你获取到角色列表之后再按照授权0信息将它们移除掉. 同时还请注意不能因为有了一个GUI的访问控制,就省掉了后台固有的安全实现.
- AngularJS – 实现基于角色访问控制的 GUI
- AngularJs实现基于角色的前端访问控制
- 基于角色的访问控制
- 基于角色的访问控制
- 基于角色的访问控制
- RBAC(基于角色的访问控制)的实现
- 简单的基于角色的访问控制
- 基于角色管理的系统访问控制
- 基于角色管理的系统访问控制
- 基于角色管理的系统访问控制
- 基于角色访问控制的UML表示
- 基于角色管理的系统访问控制
- 基于角色管理的系统访问控制
- 基于角色管理的系统访问控制
- 基于角色管理的系统访问控制
- 基于角色访问控制的UML表示
- 基于角色管理的系统访问控制
- 基于角色访问的权限控制
- 《Scrum实战》定义DoD
- 了解BEM
- 【HDU1872】稳定排序(sort)
- Go语言学习笔记 --- 控制语句之if判断,循环语句for, switch语句和跳转语句
- 字节流和字符流转换、标准输入流和标准输出流、打印流、对象序列化、随机流
- AngularJS – 实现基于角色访问控制的 GUI
- 代价函数 cost function
- web项目部署详细步骤
- POJ 2349(Kruskal) Arctic Network
- 字符串
- Sublime Text 3修改插件安装位置
- ASP.NET 连接数据库 增删改查简单实例
- Tensorflow 基础(二)
- webstorm配置svn