Angularjs拦截器不会添加令牌

时间:2017-12-10 15:10:31

标签: javascript angularjs header request interceptor

您好我已经创建了基本的angularJS拦截器,它应该在每次请求之前添加令牌。令牌来自localforage,我确定它在那里,因为我在拦截器中console.log,它在浏览器控制台中显示。当我尝试注销它时说401因为令牌不存在请求拦截器看起来很好并且它不会在控制台中引起任何错误。我知道请求中没有令牌,因为我在Chrome控制台的网络选项卡中检查了它。

拦截器代码:

(function () {
    'use strict';

    angular
        .module('app')
        .factory('authInterceptorService', Factory);

    Factory.$inject = ['$q', '$injector', '$localForage'];

    function Factory ($q, $injector, $localForage) {
        return {
            request: function(config) {

                config.headers = config.headers || {};

                if(config.url.indexOf('v1') !== -1) {
                    $localForage.getItem('authorization')
                        .then(function (authData) {
                            if (authData) {
                                config.headers.Authorization = 'Bearer ' + authData.token;
                                console.log('theoretically i added token: ' + authData.token);
                                return config;
                            }
                            }, function () {
                                console.log("error with getting authorization localForage in interceptor");
                            }
                        );
                }

                return config;
            },
            responseError: function(rejection) {

                if (rejection.status === 401) {
                    $localForage.clear().then(function() {
                        $rootScope.$emit('localForageUpdated');
                    });
                }

            }
        };
    }
})();

它不会为每个请求添加令牌。 Console.log就在行之后,应该为每个请求添加令牌,正如预期的那样正常工作:

  

理论上我添加了令牌:eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwic2VjcmV0IjoiMmM2ZGNmNmYyNWZjOThjZDdiMjk4OTY2MDg2MTEzMjIifQ.5w-eCNnsWpkp-Ztpx8gpjeZ2AVNCRtbb1Pl3Iv3veLI

为什么我的拦截器不会为每个请求添加令牌?

在我的SPA的早期版本中,我在登录服务中有成功登录功能$http.defaults.headers.common.Authorization = 'Bearer ' + response.data.data.attributes.token;并且它正常工作。现在,当我的SPA更大时,我决定将其与我的登录功能分开。

我认为此问题可能与config.headers有关。也许它应该是params或其他什么?请快速帮助。

修改

我在代码上做了更多的debbugin,我发现了一些非常有趣的东西。当我添加了console.log(config)时,我发现这个令牌实际上在config对象中:

headers:
Accept:
"application/json, text/plain, */*"
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwic2VjcmV0IjoiNzk5YThjYzkxYjI2NTdiYWI1ZGNiMzVkNWU3YzVlYmIifQ.RR00Y6LmDuSpePoYlm775AzhbTBIlO93OXnU9P1EHnw"

但是,请求标头上的网络选项卡中仍然没有授权标头,您可以在此处看到: img

EDIT2 这里的错误是我在承诺解析之前返回配置为 charlietfl 在下面的评论部分中提到。所以我尝试在return之前使用$localForage并删除return config;。我的SPA停止渲染,所以我尝试使用$q这样:

return {
    request: function(config) {

        config.headers = config.headers || {};
        var deferred = $q.defer();

        if(config.url.indexOf('v1') !== -1) {
            $localForage.getItem('authorization')
                .then(function (authData) {
                    if (authData) {
                        config.headers.Authorization = 'Bearer ' + authData.token;
                        console.log('theoretically i added token: ' + authData.token);
                        console.log(config);
                        deferred.resolve(config);
                    }
                    }, function () {
                        console.log("error with getting authorization localForage in interceptor");
                        deferred.resolve(config);
                    }
                );
        }
        return deferred.promise;
    },

但它也会导致停止渲染我的SPA视图。通常它会在我删除return config;时停止渲染,为什么?它应该现在正常工作..

我只需在上面的代码示例中为这两个条件添加else,并在那里使用deferred.resolve(config);。现在一切正常。

0 个答案:

没有答案