什么是隐藏/显示AngularJS，或者基于身份验证的用户权利的任何其他单页的应用程序UI组件的正确方法？ [英] What's the proper way to hide/show AngularJS, or any other single page application ui components based on authenticated user rights?
问题描述
我有一个使用应用程序的春季安全作为服务器端认证/授权， Spring MVC的作为的 REST 的服务器端的端点和AngularJS为视图。
I have an application that uses Spring Security for server side authentication/authorization, Spring MVC for the REST server side endpoints, and AngularJS for view.
在服务器端，我实现需要accesing所有的REST端点，根据用户权限的所有过滤器。
我的问题是，我应该怎么方法制做的根据验证的用户可见/隐藏的HTML元素的的权利？
In the server side I've implemented all the filters needed for accesing all those REST endpoints, based on the user rights. My question is, how should I approach making visible/hiding html elements, based on the authenticated USER rights?
例如我在视图中3个按钮（按钮1，按钮2，按钮3 的）。每个按钮都有一个相应的用户权限后，应使其可见/隐藏。让我们称之为权利的 USER_RIGHT1，USER_RIGHT2，USER_RIGHT3 的
For example I have in the view 3 buttons (button1, button2, button3). Each button has a corresponding USER RIGHT, that should make them visible/hidden. Let's call that rights USER_RIGHT1, USER_RIGHT2, USER_RIGHT3.
如果用户有合适的 USER_RIGHT1 的他应该在视图中看到的按钮1 的，如果他有正确的 USER_RIGHT2 的，他应该看到视图中的按钮2 的，等等。
If the user has the right USER_RIGHT1 he should see in the view the button1, if he has the right USER_RIGHT2 he should see in the view the button2, and so on.
我的方法是有在客户端通过身份验证的用户权限列表，以及做一些如下面的例子：
My approach was to have a list of the authenticated user rights in the client, and do something as the following example:
<div ng-if="rights contains USER_RIGHT1">
<button name="button1".... />
</div>
<div ng-if="rights contains USER_RIGHT2">
<button name="button2".... />
</div>
我不知道被验证的用户右边列表应该是在客户端。
I am not sure if the authenticated user right list should be in the client.
我应该如何处理这个问题呢？我在做正确吗？
How should I approach this problem ? Am I doing it correctly ?
推荐答案
在浏览器客户端，即对安全是没用的。然而，它应该是present从看到的东西，他们不应然而服务器应该是最终的地方安全进行停止的平均用户
Security on the client i.e. in a browser is next to useless. However, it should be present to stop the average user from seeing something they shouldn't however the server should be the ultimate place security is carried out.
我想创建一个快速的指令做显示/隐藏或UI组件，并有认证服务做实际的逻辑来确定用户是否具有正确的权限。
I'd create a quick directive to do the showing / hiding or UI components and have a authentication service to do the actual logic to determine if the user has the correct rights.
<击>我对实际的方式60％通过我的博客上写在AngularJS的深度文章关于授权。我会回来检查在大约一个星期，我应该完成它 - 它可能会帮助你的路由授权以及
I'm actual about 60% of the way through writing an in depth article about authorisation in AngularJS on my blog. I'd check back in about a week and I should have it done - it might help you with route authorisation as well.
更新：本博客文章角路线授权和安全，可以发现这里
UPDATE: The blog post about angular route authorization and security can be found here
基本上授权服务将授权用户与后端服务那就存储他们的应用程序的权利。
Basically the authorisation service would authorise the user with your backend service it would then store their application rights.
该指令随后将使用该服务，以确定用户是否具有足够的权限来看到的UI组件。
The directive would then use this service to determine if the user has enough rights to see the UI component.
我没有测试过以下code，所以你可能需要调试。
I haven't tested the below code so you might need to debug it.
angular.module('myApp').factory('authService', [
function () {
var loggedInUser,
login = function (email, password) {
//call server and rights are returned
//loggedInUser is assigned
},
hasSecurityRoles = function (requiredRoles) {
var hasRole = false,
roleCheckPassed = false,
loweredRoles;
if (loggedInUser === undefined) {
hasRole = false;
} else if (loggedInUser !== undefined && requiredRoles === undefined) {
hasRole = true;
} else if (loggedInUser !== undefined && requiredRoles !== undefined) {
if (requiredRoles.length === 0) {
hasRole = true;
} else if (loggedInUser.permittedActions === undefined) {
hasRole = false;
} else {
loweredRoles = [];
angular.forEach(loggedInUser.permittedActions, function (role) {
loweredRoles.push(role.name.toLowerCase());
});
// check user has at least one role in given required roles
angular.forEach(requiredRoles, function (role) {
roleCheckPassed = roleCheckPassed || _.contains(loweredRoles, role.toLowerCase());
});
hasRole = roleCheckPassed;
}
}
return hasRole;
};
return {
login: login,
hasSecurityRoles: hasSecurityRoles
};
}
]);
angular.module('myApp').directive('visibleToRoles', [
'authService',
function (authService) {
return {
link: function (scope, element, attrs) {
var makeVisible = function () {
element.removeClass('hidden');
},
makeHidden = function () {
element.addClass('hidden');
},
determineVisibility = function (resetFirst) {
if (resetFirst) {
makeVisible();
}
if (authService.hasSecurityRoles(roles)) {
makeVisible();
} else {
makeHidden();
}
},
roles = attrs.visibleToRoles.split(',');
if (roles.length > 0) {
determineVisibility(true);
}
}
};
}
]);
然后您可以使用它像这样
You would then use it like this
<div visible-to-role="admin,usermanager">.....</div>
这篇关于什么是隐藏/显示AngularJS，或者基于身份验证的用户权利的任何其他单页的应用程序UI组件的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
