グローバルに使用するリファクタリング角度ui-routerリゾルバ

Question

角度設定内で解決方法があります。それは不正なアクセスからビューを保護するために書かれています。問題は、別のルートファイルを作成すると、各ファイルに同じ解決方法をコピーする必要があることです。私はそれを一度書くことができ、それをどこでも使うことができるように、他の方法はありますか？

(function(){ 

'use strict'; 

var app = angular.module('app'); 

app.config(/* @ngInject */ function($stateProvider, $urlRouterProvider) { 

    var authenticated = ['$q', 'MeHelper', '$state', function ($q, MeHelper, $state) { 
     var deferred = $q.defer(); 
     MeHelper.ready() 
      .then(function (me) { 
       if (me.isAuthenticated()) { 
        deferred.resolve(); 
       } else { 
        deferred.reject(); 
        $state.go('login'); 
       } 
      }); 
     return deferred.promise; 
    }]; 

    $stateProvider 
     .state('index', { 
      url: "", 
      views: { 
       "FullContentView": { templateUrl: "start.html" } 
      } 
     }) 
     .state('dashboard', { 
      url: "/dashboard", 
      views: { 
       "FullContentView": { templateUrl: "dashboard/dashboard.html" } 
      }, 
      resolve: { 
       authenticated: authenticated 
      } 
     }) 
     $urlRouterProvider.otherwise('/404'); 

    }); 

})(); 

編集：MeHelperはサービスです。

Answer 1

app.run(function ($rootScope, $state) { 
 
     $rootScope.$on('$locationChangeSuccess', function() { 
 
     if (unauthorized && $state.current.name !== 'login') { 
 
      $state.go('login'); 
 
     } 
 
     }); 
 
    });

は、あなたのコードをリファクタリングするために、あなたは サービスを登録し、サービスに認証コードを取る必要があります。

認証サービス：

app.factory('authenticateService', ['$q', 'MeHelper', 
    function($q,MeHelper){ 

     var obj = {}; 

     obj.check_authentication = function(params) 
     { 
      var deferred = $q.defer(); 
      MeHelper.ready() 
       .then(function (me) { 
        if (me.isAuthenticated()) { 
         deferred.resolve(); 
        } else { 
         deferred.reject(); 
         $state.go('login'); 
        } 
       }); 
      return deferred.promise; 

     } 


     return obj; 
    } 
]); 

その後、依存性注入や関数パラメータにこのサービス名を取って、解決のいずれかのルートファイルでこのサービスを使用し、

ルート設定ファイル：

(function(){ 

'use strict'; 

var app = angular.module('app'); 

app.config(/* @ngInject */ function($stateProvider, $urlRouterProvider) { 


    $stateProvider 
     .state('index', { 
      url: "", 
      views: { 
       "FullContentView": { templateUrl: "start.html" } 
      } 
     }) 
     .state('dashboard', { 
      url: "/dashboard", 
      views: { 
       "FullContentView": { templateUrl: "dashboard/dashboard.html" } 
      }, 
      resolve: { 
       authenticated: 
         function(authenticateService) { 
           return authenticateService.check_authentication(); 
         } 
      } 
     }) 
     $urlRouterProvider.otherwise('/404'); 

    }); 


})(); 

以下の行を見てください。解決するためにルート設定で変更するもの

サービスは、ラインの下で注入された：

resolve: { 
      authenticated: 
       function(authenticateService) { 
          return authenticateService.check_authentication(); 
        } 
     } 

Answer 2

ルートの変更を確認してください。