Question

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

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

这将是

说一个角色：会计

功能用户管理

**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

现在，让我们来看一个名为＆＃34; Get User＆＃34;的视图。当会计师登录时，我希望会计师看到用户列表，但是当管理员用户登录时，我希望管理员看到底部带有按钮的用户列表＆＃34;添加新用户＆＃34 ;。

我的静态HTML已经包含一个按钮..由于这是一个静态HTML，而不是一个MVC视图，我没有能力编写服务器端代码。我不想，否则，我会转向MVC视图。

我的Web API完全安全。我没有问题。由于在API返回JSON数据之前，JWT令牌已获得授权并检查索赔。

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

Answer 1

对于我的客户端验证，我通常在JWT中编码用户的角色，然后将其提供给中央Auth服务。然后，您可以对您不希望用户查看的任何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应用程序通常有一个shell或包装器控制器，它将公开这个函数，以便它可以在UI中的任何地方轻松调用，如下所示：

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

显然，这本身并不足够，但是由于您的后端路由无法返回任何数据，最糟糕的情况是具有JS技能的人可能会找到一些无法获取数据的空模板。< / p>

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

1 个答案: