Question

起初我有configAuth标题，包括每个控制器的JWT令牌。

var configAuth = {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': localStorage.getItem('token')
    }
};

但是现在当我拥有大量的控制器时，我意识到我需要对此做点什么。我已经听说过interceptors并试图获取它们。

我知道我不能只为每个请求添加令牌，因为有些页面和/login之类的请求根本不应该有Authorization令牌。获取带有Authorization header的html文件在某种程度上给了我一个例外。所以我试图分割这样的请求：

angular.module('App')

.factory('sessionInjector',['$injector', function ($injector) {
    var sessionInjector = {
        request: function (config) {
            if (config.url == "/one" || config.url == "/two"){
                config.headers['Content-Type'] = 'application/json;charset=utf-8;';
                config.headers['Authorization'] = localStorage.getItem('token');
            } else {
                config.headers['Content-Type'] = 'application/json;charset=utf-8;';
            }
            return config;
        },
        response: function(response) {
            if (response.status === 401) {
                var stateService = $injector.get('$state');
                stateService.go('login');
            }
            return response || $q.when(response);
        }
    };
    return sessionInjector;
}]);

但它不能处理像/one/{one_id}这样的请求，我无法对所有可能性进行硬编码。那么最佳做法是什么？

Answer 1

有一种更好的方法可以做到这一点。登录后，将auth令牌设置为$ http服务的标头。这样您就不需要在每次调用中传递配置对象。

登录：

function Login(credentials){
    $http.post(apiPath, credentials).then(function (data) {
         $http.defaults.headers.common['Authorization'] = data['token'];
    });
}

此后的所有HTTP调用都将设置Authorization标头。

但是有些调用不需要授权，在这种情况下你可以编写一个函数，它在头文件中没有Authorization时传递了自己的配置对象。

没有授权的功能：

function Without_Auth(url, data) {
    var deferred = $q.defer();
    var responsePromise = $http({
        method: 'post',
        url: url,
        data: data,
        headers: {
            'Content-Type': 'application/json;charset=utf-8;'
        }
    })
    responsePromise.success(function (data) {
        deferred.resolve(data);
    });
    responsePromise.error(function (err) {
        deferred.reject();
    });
    return deferred.promise;
}

希望这能解决你的问题！

Answer 2

你现在拥有的是一个很好的起点。我假设您的大多数API都需要身份验证令牌，因此设置哪些端点不需要身份验证可能是更快的路径。我还没有测试过这个，但它可能会让你走上正轨。我将您的注入器设置为提供程序，以便您可以在配置中配置匿名路由规则。

angular.module('App')
    .provider('sessionInjector',[function () {
        var _anonymousRouteRules;

        this.$get = ['$injector', getSessionInjector];
        this.setupAnonymousRouteRules = setupAnonymousRouteRules;

        function getSessionInjector($injector) {
            var service = {
                request: requestTransform,
                response: responseTransform
            };

            function requestTransform(config) {         
                if (!isAnonymousRoute(config.url)){
                    config.headers['Authorization'] = localStorage.getItem('token');
                }

                config.headers['Content-Type'] = 'application/json;charset=utf-8;';

                return config;
            }

            function responseTransform(response) {
                if (response.status === 401) {
                    var stateService = $injector.get('$state');
                    stateService.go('login');
                }
                return response || $q.when(response);
            }

            return service;
        }

        function isAnonymousRoute(url) {
            var isAnonymous = false;
            angular.forEach(_anonymousRouteRules, function(rule) {
                if(rule.test(url)) {
                    isAnonymous = true;
                }
            });
            return isAnonymous;
        }

        function setupAnonymousRouteRules(anonymousRouteRules) {
            _anonymousRouteRules = anonymousRouteRules;
        }
    }]);

有了这个，您可以通过为您的网址传入一组正则表达式来配置规则：

angular.module('App').config(['sessionInjectorProvider', config]);

function config(sessionInjectorProvider) {
    sessionInjectorProvider.setupAnonymousRouteRules([
        /.*\.html$/,
        /^\/login$/
    ]);
}

如何为不同的请求（URL）拆分拦截器？

2 个答案: