angular app.config 中的多个拦截器

Question

在我的 angular 应用程序中，我想将信息添加到对外部 API 的所有调用。

为此，我使用了从 app.config.

中调用的拦截器

app.config(['$httpProvider', ... , function($httpProvider, ...){      
    $httpProvider.interceptors.push('globalInterceptorService');
    $httpProvider.interceptors.push('authInterceptorService');
}]);

当我只使用一个拦截器时它工作正常。但是当我使用其中的 2 个时（如上例所示），其中一个的动作会被另一个覆盖。

知道如何处理多个拦截器吗？也许建议只有 1 个？非常感谢任何帮助。

拦截机 1 :

function globalInterceptorService ($q, localStorageService) {

  var service = {};

  var _request = function (config) {

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

    var AreaId = localStorageService.get('AreaId');
    if (AreaId) {

      config.headers.AreaId = 'AreaId ' + AreaId;

    }

    return config;
  };

  service.request = _request;

  return service;
}

拦截机 2 :

function authInterceptorService ($q, $location, localStorageService) {

  var service = {};

  var _request = function (config) {

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

    var authData = localStorageService.get('authorizationData');
    if (authData) {
      config.headers.Authorization = 'Bearer ' + authData.token;
    }

    return config;
  };

  service.request = _request;

  return service;
}

Answer 1

我认为你应该推送函数，而不是它的字符串名称。

function globalInterceptorService($q, localStorageService){...}
$httpProvider.interceptors.push(globalInterceptorService);

示例：http://jsfiddle.net/aartek/tbhobfbu

或

function globalInterceptorService($q, localStorageService){...}
$provide.factory('globalInterceptorService',globalInterceptorService)
$httpProvider.interceptors.push('globalInterceptorService');

示例：http://jsfiddle.net/aartek/tbhobfbu/2/

在 documentation

中有详细描述

angular app.config 中的多个拦截器

angular multiple interceptors in app.config

angularjs

interceptor