AngularJS + UIルーター：承認とアクセス権の確認

アプリケーションにユーザーの承認やアクセス権のチェックが含まれる場合は、適切な解決策を探してホイールを再発明するか、Googleを作成する必要があります。 基本的に、私もやった。 結局、私が受け入れられる以下のオプションを受け入れました。

背景

承認されたユーザーに関する情報をsessionStorageに保存し、アプリケーションを$rootScope



で起動したときにその情報をコピーすることにしました。 また、UIルーターの作成者の推奨により、簡単にアクセスできるように、 $stateParam



に$state



および$stateParam



オブジェクトを$stateParam



しています。 特定の状態へのアクセスに関する情報は、状態自体を記述するときにdata



ブロックを介して送信できます。 アプリケーションのどこからでもアクセスが拒否されるため、ログインページ、パスワードの回復、登録など、承認を必要としない状態に対して反対の値を追加し、値noLogin = true



を追加することにしました。

 angular.module('myApp.auth', [ 'ui.router' ]) .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider .state('auth', { url: '/auth', abstract: true, template: '<ui-view>' }) .state('auth.login', { url: '/login', templateUrl: 'src/auth/partials/login.html', data: { 'noLogin': true } }); ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

事前ルーティング用のサービスの作成

ルーターが機能する前に、訪問者を要求された状態に送信する前に、最初に承認とアクセス権を確認する必要があります（UIルーターが状態ではなく状態を管理していることを知っていると仮定します。詳細については、公式ドキュメントを参照してください）。 これを行う良い方法は、メインモジュールのrun（）メソッドの$stateChangeStart



イベントでリスナーをハングさせることです。 膨大で複雑なメソッドの本体を乱雑にしないために、別のサービスに入れます; run()



メソッドでは、単にserviceメソッドを呼び出します。 これ以上の説明は必要ないと思います。

 angular.module('myApp.auth') .service('SessionService', [ '$injector', function($injector) { "use strict"; this.checkAccess = function(event, toState, toParams, fromState, fromParams) { var $scope = $injector.get('$rootScope'), $sessionStorage = $injector.get('$sessionStorage'); if (toState.data !== undefined) { if (toState.data.noLogin !== undefined && toState.data.noLogin) { //  ,   -  //     } } else { //    if ($sessionStorage.user) { $scope.$root.user = $sessionStorage.user; } else { //     -     event.preventDefault(); $scope.$state.go('auth.login'); } } }; } ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてをまとめる

さて、最後のタッチが残っているので、すべて機能します-リスナーを$state



サービスイベントにハングさせます。

 angular.module('myApp', [ 'myApp.auth', 'ui.router', 'ngStorage' ]) .run([ '$rootScope', '$state', '$stateParams', 'SessionService', function ($rootScope, $state, $stateParams, SessionService) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.user = null; //      $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { SessionService.checkAccess(event, toState, toParams, fromState, fromParams); } ); } ])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

この例は、アイデアとして使用し、あらゆる種類のグッズを使用して独自の承認とアクセス権の検証を記述するのに十分だと思います。 たとえば、同じdata



ブロックで、状態を説明するときに、RBACルールを渡して、サービスでチェックできます。