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

Question

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

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

E。G的值是

说出一个角色:会计

功能用户管理

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

会计的有效索赔:CanReadUser

现在对于admin角色，后端权限表看起来像

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

有效索赔会计:CanWriteUser

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

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

我的Web api是完全安全的。我没有问题。因为在API返回JSON数据之前，JWT令牌是经过授权和检查的。

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

Answer 1

对于我的客户端验证，我通常在JWT中编码用户角色，然后使其可用于中央验证服务。然后，您可以对任何不想让用户看到的UI元素执行ng-if逻辑。这是我的一个应用中的一个例子。注意，我使用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应用程序通常有一个外壳或包装器控制器来公开这个函数，这样它就可以很容易地在UI的任何地方调用，像这样:

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

显然这本身是不够的，但是当你有你的后端路由安全返回任何数据时，最坏的情况是有JS技能的人可以找到一些空的HTML模板，无法获得数据。