如何在AngularJS中处理基于角色的授权

Question

我正在创建一个web应用程序，它将满足用户的两个要求。注：我是AngularJS作为一个web开发平台的新手。

前端-1：这是一个搜索功能，用户可以根据关键字搜索和过滤器搜索特定的文档和研究。这是使用MySQL实现的，用于获取数据并使用AngularJS进行显示。

前端-2：用户可以选择在网络应用程序上创建帐户。账户用途：

1. 保存他们的搜索查询
2. 如果管理员将每个用户与特定角色关联，那么这些用户将可以访问额外的选项，例如修改数据库中的文档，以及上载新文档和其他页面

我的问题：

如何在AngularJS中处理基于角色的授权？我不知道如何创建一个包含以下功能的框架：-用户获得与其关联的角色-阻止用户访问与角色无关的页面或功能

我读过一些SO文章和教程，但每一篇教程的结尾都是作者说应该在服务器端处理基于角色的授权，我理解为什么这是真的。

如果有人能给我介绍一些教程或文章，那就太好了，这些教程或文章在服务器端为AngularJS实现了基于角色的授权。

谢谢！

Answer 1

我在后端和前端都使用基于角色的授权。由于我使用UI路由器进行路由，我找到的最好的资源（并根据我的需求进行了改进）是这篇文章：

链接已过期

如果你使用UI路由器，一定要检查一下。基本上，你需要设置你的路线安全并拦截所有的路线更改。这篇文章还包括一个指令，如果用户没有访问其背后内容的权限，则可以隐藏用户界面元素

---

编辑：添加一些代码。

首先，您需要将用户的权限存储在某个地方，例如在localStorage中序列化的用户对象上：

{"id":1,"name":"user","created_at":"2016-04-17 18:58:19","gender":"m","roles":["admin"]}

然后，你有两个重要的部分：

• 指令-根据分配的权限确定元素是否可见
• 服务-处理授权检查

指令：

(function() {
  'use strict';
  angular
    .module('app')
    .directive('access', access);
  /** @ngInject */
  function access(authorization) {
    var directive = {
      restrict: 'A',
      link: linkFunc,
    };
    return directive;
    /** @ngInject */
    function linkFunc($scope, $element, $attrs) {
      var makeVisible = function () {
        $element.removeClass('hidden');
      };
      var makeHidden = function () {
        $element.addClass('hidden');
      };
      var determineVisibility = function (resetFirst) {
        var result;
        if (resetFirst) {
          makeVisible();
        }
        result = authorization.authorize(true, roles, $attrs.accessPermissionType);
        if (result === authorization.constants.authorised) {
          makeVisible();
        } else {
          makeHidden();
        }
      };
      var roles = $attrs.access.split(',');
      if (roles.length > 0) {
          determineVisibility(true);
      }
    }
  }
})();

您需要设置CSS，使类为hidden的元素不可见。

服务：

(function() {
  'use strict';
  angular
    .module('app')
    .factory('authorization', authorization);
  /** @ngInject */
  function authorization($rootScope) {
    var service = {
      authorize: authorize,
      constants: {
        authorised: 0,
        loginRequired: 1,
        notAuthorised: 2
      }
    };
    return service;
    function authorize(loginRequired, requiredPermissions, permissionCheckType) {
      var result = service.constants.authorised,
          user = $rootScope.currentUser,
          loweredPermissions = [],
          hasPermission = true,
          permission;
      permissionCheckType = permissionCheckType || 'atLeastOne';
      if (loginRequired === true && user === undefined) {
          result = service.constants.loginRequired;
      } else if ((loginRequired === true && user !== undefined) &&
                  (requiredPermissions === undefined || requiredPermissions.length === 0)) {
          result = service.constants.authorised;
      } else if (requiredPermissions) {
          loweredPermissions = [];
          angular.forEach(user.roles, function (permission) {
              loweredPermissions.push(permission.toLowerCase());
          });
          for (var i = 0; i < requiredPermissions.length; i += 1) {
              permission = requiredPermissions[i].toLowerCase();
              if (permissionCheckType === 'combinationRequired') {
                  hasPermission = hasPermission && loweredPermissions.indexOf(permission) > -1;
                  // if all the permissions are required and hasPermission is false there is no point carrying on
                  if (hasPermission === false) {
                      break;
                  }
              } else if (permissionCheckType === 'atLeastOne') {
                  hasPermission = loweredPermissions.indexOf(permission) > -1;
                  // if we only need one of the permissions and we have it there is no point carrying on
                  if (hasPermission) {
                      break;
                  }
              }
          }
          result = hasPermission ?
                   service.constants.authorised :
                   service.constants.notAuthorised;
      }
      return result;
    }
  }
})();

现在，您可以使用该指令来显示/隐藏元素：

<a ui-sref="app.administration" class="btn btn-primary pull-right" access="admin">Administration</a>

当然，这只会隐藏DOM中的元素，所以您也必须在服务器上进行授权检查。

第一部分解决了在用户界面中显示/隐藏元素的问题，但您也可以保护应用程序路由。

路线定义：

(function() {
  'use strict';
  angular
    .module('app')
    .config(routeConfig);
  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
      .state('app.dashboard', {
        url: '/dashboard',
        data: {
          access: {
            loginRequired: true
          }
        },
        templateUrl: 'template_path',
        controller: 'DashboardController as vm'
      }
  }
})();

现在只检查$stateChangeStart事件中的权限

(function() {
  'use strict';
  angular
    .module('app')
    .run(runBlock);
  /** @ngInject */
  function runBlock($rootScope, $state, authorization) {
    $rootScope.$on('$stateChangeStart', function(event, toState) {
      // route authorization check
      if (toState.data !== undefined && toState.data.access !== undefined) {
        authorised = authorization.authorize(toState.data.access.loginRequired,
                                             toState.data.access.requiredPermissions,
                                             toState.data.access.permissionCheckType);
        if (authorised === authorization.constants.loginRequired) {
          event.preventDefault();
          $state.go('app.login');
        } else if (authorised === authorization.constants.notAuthorised) {
          event.preventDefault();
          $state.go('app.dashboard');
        }
      }
    });
  }
})();