AngularJS – 达成基于角色访问控制的 GUI

发布时间：2021-11-20 14:01:53 所属栏目：教程来源：互联网

导读：这些天我们忙于应用的前端工作，我们主要使用angular完成的。最近的一个需求是基于角色访问GUI。一个用户可以有多个角色，而它应只能访问授权给他的那一部分GUI。我们主要通过在2个层次限制应用的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的访问控制，就省掉了后台固有的安全实现.

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

台式电脑怎样恢复系统	iso其是什么格式怎么打
电脑上对话框太大如何	小白重装系统Bootfix.