Question

我在angular config中有解决方法。编写它是为了保护视图免受未经授权的访问。现在的问题是，如果我创建一个不同的路由文件，我必须在每个文件上复制相同的解决方案。有没有其他方法可以让我写一次并在任何地方使用它？

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

然后，在解析中的任何路由文件中使用此服务，在依赖注入或函数参数中使用此服务名称，

路线配置文件：

(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

检查路线变化。

＆＃13;

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

＆＃13;

重构角度ui-router解析器以全局使用它

2 个答案: