重构angular ui-router解析器，让它全局使用

Question

我在angular配置中有一个resolve方法。它是为了防止未经授权的访问而编写的。现在的问题是，如果我创建一个不同的路由文件，我必须在每个文件上复制相同的解析。有没有别的方法可以让我写一次就可以在任何地方使用?

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

然后，在resolve中的任何路由文件中使用这个服务，在依赖注入或函数参数中使用这个服务名，

路由配置文件:

(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

检查路线变更。

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