AngularJS – 实现基于角色访问控制的 GUI
AngularJS – 实现基于角色访问控制的 GUI
这些天我们忙于应用的前端工作,我们主要使用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系列:
- 带你走近AngularJS - 基本功能介绍
- 带你走近AngularJS - 体验指令实例
- 带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍:请点这里
AngularJS 的下载地址:请点这里
本文永久更新链接地址:
评论暂时关闭