AngularJs授权布局

Question

我正在使用 Web API 和 AngularJs 构建一个大型应用程序。我使用身份验证和基于声明的授权构建了安全网络 api。一个要求是不同的用户可以在同一个模板上查看不同的模块。

我是 AngularJs 的新手。我在客户端使用令牌进行了身份验证。另外，在 web api 中，我创建了一个服务来获取给定用户 ID 的所有权限。响应是资源（控制器）/操作（方法）对的列表。如何根据客户端的授权规则实施正确的布局？这是否仅依赖于网络 api 权限响应和基于权限的 show/hide (ng-hide/ng-show) 内容？

这是一个好方法吗？我还需要研究哪些 modules/directives？例如加载器在用户请求父路由之前不加载嵌套路由。

为了增加复杂性，该站点还需要以双语工作。我认为 ng-translate。我之所以提到这一点，是因为它可能会引发另一场关于这是否有利于 MVC 而不是 AngularJs 的讨论。但如果能解决以上两个问题，优先Angular

Answer 1

正确的方法是根据服务器上的授权构建 AngularJS 路由配置。这应该在用户获得授权之后和 AngularJS 应用程序初始化之前构建。这样，授权用户会根据他的角色等看到 "complete" 应用程序。使用 ng-show/ng-hide 不是一个好方法。每个视图也应该只做一件事。因此根据需要完成的任务加载单独的视图。

关于多语言支持，这与Authorization无关。前段时间，我写了一个使用 jQuery i18next 插件的自定义 AngularJS 过滤器。这是一个非常简单的实现。

但是您现在可以使用 https://github.com/i18next/ng-i18next

Answer 2

（抱歉误会了问题）

我认为使用ng-hide/show不是什么大问题。归根结底，用户无权访问数据。我觉得应该是依赖api权限+show/hide的presentation。取决于您想要的复杂性...您可以将 MVC 与 angularjs 一起使用，因为它是一个大型应用程序。

Answer 3

所有的身份验证、授权和验证都应该在服务器端完成。您可以根据 roles/claims 服务器告诉当前用户使用的浏览器来调整用户界面。

实现此目的的一种方法是创建类似 roles/userprofile 控制器的东西，它将以当前用户拥有的角色列表作为响应。在客户端，您可能需要可以在任何地方注入的东西，这样您就可以确定用户界面的行为。

myApp.factory(‘myUser’, function(Roles, $q) {

  // Create a promise to inform other folks when we’re done.
  var defer = $q.defer();

    // For this example I’m using ngResource

    Role.query({
        /*
            No params — let the server figure out who you ‘really’ are.
            Depending on WebApi configuration this might just be 
            as simple as this.User (in context of the controller).
        */ 
    }, function(roles) {

        var user = {
            roles: roles,
            isInRole: function(role) {
                return user.roles.indexOf(role) !== -1;
            }
        };

        defer.resolve(user);
    });

    return defer;

});

因为上面的 factory 正在返回一个承诺，我们可以强制在创建某个 route/controller 实例之前解决 myUser。我使用的一个小技巧是将我所有的路由定义收集到一个对象中，使用 angular.forEach 循环遍历它们并向每个对象添加 resolve.myUser 属性。您也可以将其用于 pre-load/initialize 其他内容。

现在将 myUser 注入任何你喜欢的地方：

myApp.controller(‘MyController’, function($scope, myUser) {
  // Expose it on the current scope
  $scope.myUser = myUser;
});

... 在您的标记中...

<div class=“my-content-thingy”>
  <p>Lorem del ipsum …</p>
  <button class=“btn” ng-if=“myUser.isInRole(‘content-editor’)”></button>
</div>

注意：您可能想要使用 ng-if 而不是 ng-show；后者将元素保留在 DOM 中。

请记住，您不会在客户端验证任何东西；这一切都在服务器端完成。一种简单的方法是将 Authorize 属性放在适当的控制器操作上。

希望对您有所帮助。

AngularJs授权布局

AngularJs authorization layout

layout

angularjs

angular-services

asp.net-identity

angular-ui-router