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

Question

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

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

フロントエンド - 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"]} 
  

  、次の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を設定する必要があります。

サービス：あなたがしなければならないので、これが唯一のDOMで要素を非表示になります。もちろん、

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

：今

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

、あなたは/非表示要素を表示するためにディレクティブを使用することができますサーバー上の権限チェックも。

この最初の部分は、ユーザーインターフェイスで要素を表示/非表示にするだけでなく、アプリのルートを保護することもできます。

ルート定義：

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

})();