web-dev-qa-db-ja.com

AngularJSでロールベースの承認を処理する方法は？

ユーザーの2つの要件を満たすWebアプリを作成しています。注：私はWeb開発プラットフォームとしてAngularJSを初めて使用します。

フロントエンド-1：ユーザーがキーワード検索とフィルターに基づいて特定のドキュメントと調査を検索できる検索機能。これは、AngularJSを使用してデータと表示をフェッチするためにMySQLを使用して実装されています。

フロントエンド-2：ユーザーはWebアプリでアカウントを作成するオプションがあります。アカウントの目的は次のとおりです。

  1. 検索クエリを保存します。
  2. 管理者が各ユーザーを特定の役割に関連付けると、それらのユーザーは、データベースに存在するドキュメントの変更や、新しいドキュメントや他のページのホストのアップロードなどの追加オプションにアクセスできるようになります。

私の質問：

AngularJSでロールベースの承認を処理する方法は？次の機能を含むフレームワークを作成する方法がわかりません。-ユーザーは自分に関連付けられたロールを取得します-ユーザーがそれらのロールに関連付けられていないページまたは機能にアクセスできないようにします

いくつかのSOの記事とチュートリアルを読みましたが、すべてのチュートリアルは、役割ベースの承認はサーバー側で処理する必要があると著者が言って終了し、これが真実である理由を理解しています。

AngularJSのサーバー側にロールベースの承認が実装されているチュートリアルや記事を誰かに教えてもらえれば素晴らしいと思います。

ありがとう！

mysqlangularjsauthorizationrole-basedrole-based-access-control
7
CalmWinds

私はバックエンドとフロントエンドで役割ベースの承認を使用しています。ルーティングにUI-Routerを使用しているので、見つけた（そしてニーズに合わせて改善された）最高のリソースは次の記事です。

リンクの有効期限が切れています

UIルーターを使用している場合は、ぜひチェックしてください。基本的に、ルートセキュリティを設定し、すべてのルート変更を傍受する必要があります。この記事には、ユーザーがその背後にあるコンテンツにアクセスする権限を持っていない場合に、ユーザーインターフェイス要素を非表示にするためのディレクティブも含まれています。

編集：コードを追加します。

まず、ユーザーの権限をどこかに保存する必要があります。 localStorageでシリアル化されたユーザーオブジェクト：

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

次に、2つの重要な部分があります。

  • ディレクティブ-割り当てられた権限に基づいて要素を表示するかどうかを決定する
  • サービス-承認チェックを処理する

指令：

(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);
      }
    }
  }

})();

クラスhiddenの要素が表示されないようにCSSを設定する必要があります。

サービス：

(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');
        }
      }
    });
  }

})();
10
Adrian