Angularjs 拦截器不工作

Question

我正在尝试创建一个 $http 拦截器，如下所示：

.config(['$httpProvider',function($httpProvider){
$httpProvider.interceptors.push(function($q,$window){
    return {
        'request':function(config){
            config.headers = config.headers || {};
            if($window.sessionStorage)
                config.headers.Authorization = 'Bearer '+$window.sessionStorage.token;
        },
        'requestError':function(rejection)
        {
            $q.reject(rejection);
        },
        'response':function(response){
            return response || $q.when(response);
        },
        'responseError':function(response)
        {
            if(response!=null && response.status == 401)
            {
                delete $window.sessionStorage.token;
                //make the user login again
            }
            return response || $q.when(response);   
        }       
    };
});
}])

拦截器失败并出现错误：

 TypeError: Cannot read property 'headers' of undefined
at serverRequest (angular.js:9366)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$eval (angular.js:14466)
at Scope.$digest (angular.js:14282)
at Scope.$apply (angular.js:14571)
at bootstrapApply (angular.js:1455)
at Object.invoke (angular.js:4203)
at doBootstrap (angular.js:1453)
at bootstrap (angular.js:1473)

Answer 1

您忘记了 return config 值...

request: function(config) {
    if ($window.sessionStorage) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
    }
    return config;
}

来自documentation

request: interceptors get called with a http config object. The function is free to modify the config object or create a new one.
The function needs to return the config object directly, or a promise containing the config or a new config object.

Answer 2

我建议使用工厂并确保您的 headers object 设置为 object:

angular.module('app')
  .factory('AuthInterceptor', ["$window", "$q", function ($window, $q) {

    return {
        request: function (config) {
            config.headers = config.headers || {};
            if ($window.sessionStorage) {
               config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
            }
            return config;
        },
        responseError: function (response) {
            if(response != null && response.status == 401)
            {
                delete $window.sessionStorage.token;
                //make the user login again
            }
            return response || $q.when(response);
        }
    }
  }]);

并在您的配置部分使用：

$httpProvider.interceptors.push("AuthInterceptor");

Angularjs 拦截器不工作

Angularjs interceptor not working

angularjs

angular-http

angular-http-interceptors