angularjs - 隐藏/显示 AngularJS 或基于经过身份验证的用户权限的任何其他单页应用程序 ui 组件的正确方法是什么？

Question

我有一个应用程序，它使用 Spring Security 进行服务器端身份验证/授权，使用 Spring MVC 进行REST 服务器端端点，以及 AngularJS供查看。

在服务器端，我根据用户权限实现了访问所有这些 REST 端点所需的所有过滤器。我的问题是，我应该如何根据经过身份验证的用户权限来制作可见/隐藏html元素？

例如，我在 View 中有 3 个按钮(按钮1、按钮2、按钮3)。每个按钮都有相应的用户权限，这应该使它们可见/隐藏。我们将该权利称为USER_RIGHT1、USER_RIGHT2、USER_RIGHT3。

如果用户拥有正确的USER_RIGHT1，他应该在 View 中看到button1，如果他拥有正确的USER_RIGHT2，他应该在 View 中看到USER_RIGHT2 View button2，依此类推。

我的方法是在客户端中获取经过身份验证的用户权限列表，并执行以下示例中的操作:

<div ng-if="rights contains USER_RIGHT1">
    <button name="button1".... />
</div>
<div ng-if="rights contains USER_RIGHT2">
    <button name="button2".... />
</div>

我不确定经过身份验证的用户权限列表是否应该在客户端中。

我应该如何解决这个问题？我做得正确吗？

Answer 1

我的方法基本上就是你建议的。

您可以有一个工厂来存储用户的权限数组，并具有检查权限是否在数组中的函数:

.factory('Auth', function() {

var permissions = [];

return {
    allowed : function(permission) {

        return _.contains(permissions, permission);
    }
};});

然后你可以有一个指令，使用该服务显示/隐藏一个元素:

.directive('allowed', function(Auth){

    return {

        link : function(scope, elem, attr) {

            if(!Auth.allowed(attr.allowed)){
                elem.hide();
            }
        }
    };
});

所以在你看来你只需要做:

<div allowed="permission_name"> </div>