Angularjs 如何处理基于授权令牌的视图逻辑（在客户端）（Angular SPA+；JWT+；web API）

我正在设计一个AngularJS SPA应用程序，它从承载静态html的asp.net服务器获取视图

在后端，我有一个资源表，指示特定角色是否具有读取、修改该资源的权限。然后，这些读、写操作在应用程序中映射为声明

其中之一就是

说一个角色：会计

功能用户管理

**Path                                      Name**        Read  Write
/User {includes /User/API + /User/Views} UserManangement  Yes   No

会计师的有效索赔：CanReadUser

现在对于管理员角色，后端权限表如下所示

**Path                                      Name**        Read  Write
/User {includes /User/API + /User/Views} UserManangement  Yes   Yes

会计师的有效索赔：CanWriteUser

现在，让我们看一个名为“获取用户”的视图。当会计师登录时，我希望会计师看到用户列表，但当管理员用户登录时，我希望管理员看到用户列表，底部有一个按钮，上面写着“添加新用户”

我的静态HTML已经包含一个按钮。。因为这是一个静态HTML，而不是MVC视图，我不知道；我不具备编写服务器端代码的能力。我也不想这样做，否则，我将切换到MVC视图

我的Web API是完全安全的。我在那里没有问题。因为在API返回JSON数据之前，JWT令牌被授权并检查声明

---

我的问题是如何处理上述基于UI的操作。我是否需要在JWT中硬编码声明并在javascript中使用它们？

对于客户端验证，我通常在JWT中编码用户的角色，然后将其提供给中央身份验证服务。然后，如果不希望用户看到任何UI元素，则可以对其执行

ng逻辑。我的一个应用程序中的一个示例。注意，我使用Auth0，因此注入的
auth
服务通过
auth.profile
变量方便地公开用户角色。根据您执行JWT的方式，您可能需要将其切换到：

(function() {
'use strict';

angular
    .module('app.core')
    .factory('AuthService', AuthService);

AuthService.$inject = ['auth'];

function AuthService(auth) {
    var permissions = [];

    return {
        authorized: authorized
    };

    function authorized(permission) {
        if (!_.includes(permissions, permission)) {
            permissions.push(permission);
            console.log(permissions);
        }

        if (permission === '') return true;
        if (!auth.profile) return false;

        var userRoles = auth.profile.roles;
        return _.includes(userRoles, permission) || _.includes(userRoles, 'tinygod');
    }
}
})();

我的Angular应用程序通常有一个shell或wrapper控制器，它将公开此函数，以便可以在UI中的任何位置轻松调用它，如下所示：

<div ng-if="app.authorized('CanWriteUser')">



显然，这本身还不够，但由于您的后端路由不返回任何数据，最糟糕的情况是，有JS技能的人可能会发现一些无法获取数据的空HTML模板