angularjs - Angular http 拦截器

Question

Angular http 拦截器不适用于从拦截器内初始化的请求？

在我们的代码库中，对我们 api 的每个请求都有一个以 /api/ 开头的 url，我们有一个拦截器用我们 api 的实际地址更新这些请求(使其易于切换在开发和生产环境之间)。更新 url 后，如果存在访问 token ，拦截器还会添加授权 header 。这一切都很完美。

然而，有时访问 token 已过期，但我们仍然有一个刷新 token ，在继续实际请求之前，我首先想向我们的 api 发出请求以获取新的访问 token 。

因此，在拦截器的 request 部分，我们调用负责刷新访问 token 的服务，并在该方法返回的 then 回调中，我们更新原始请求的配置:

//This interceptor only applies to our api calls, do nothing for other requests
if(config.url.substring(0, API_PREFIX.length) !== API_PREFIX) {
    return config;
}

config.url = config.url.replace(API_PREFIX, API_ENDPOINT);

// if we are authenticated, we add the authorization header already
if(AuthSessionService.isAuthenticated()) {
    config.headers['Authorization'] = "Bearer " + AuthSessionService.getAccessToken();
    return config;
}

// so we are not authenticated, but we still do have a refresh-token, this means, we should get a new access-token
if(AuthSessionService.hasRefreshToken()) {
    var deferred = $q.defer(),
        loginService = angular.injector(['MyApp']).get('LoginService');

    loginService.refresh().then(function(result) {
        config.headers['Authorization'] = "Bearer " + AuthSessionService.getAccessToken();
        deferred.resolve(config);
    }).catch(function() {
        deferred.reject('Failed to refresh access token');
    });

    return deferred.promise;
}

//no access-token, no refresh-token, make the call without authorization headers
return config;

但是，登录服务发出的请求似乎没有应用拦截器，因此请求转到 /api/login 而不是实际的 api 端点。

这是 Angular 的设计，当从拦截器的请求方法中发出新的 http 请求时没有应用拦截器吗？

Answer 1

你的代码流程是这样的:

0) AngularJS 定义$httpProvider;

1) 你定义了 loginService 依赖于 $httpProvider 来注入(inject) $http;

2) 您定义了一个依赖于loginService 的HTTP 拦截器并改变了$http 的工作方式；

3) 你定义了注入(inject)$http的其他服务。

看看this函数，任何 AngularJS 提供者必须提供的 $get 方法。每次您的服务注入(inject) $http 作为依赖项和 returns 时都会调用它。 $http。

现在如果你回到line 396您会看到 reversedInterceptors 列表是在调用 $get 时构建的。它是一个局部变量，因此返回的 $http 实例将能够使用它，这就是答案，reversedInterceptors 是一个不同的您注入(inject)的 $http 的每个“实例”的引用。

因此 loginService 中注入(inject)的 $http (1) 与所有其他服务 (3) 中注入(inject)的不同，不同之处在于它是 reversedInterceptors 还不包含您在步骤 (2) 中添加的拦截器。

关于服务与提供商。服务建立在提供者之上，基本上是这样做的:

function MyService() {
    ...
}

angular.service('MyService', MyService);

// which Angular translates to this


function MyServiceProvider() {
    var myService = new MyService();

    this.$get = function() {
        return myService;
    };
}

angular.provider('MyServiceProvider', MyServiceProvider);

虽然提供者是这样的:

function MyOtherProvider() {
    var someStuff = [1, 2, 3];

    this.$get = function() {
        var otherStuff = [5, 6, 7]; // this is how reversedInterceptors is 
                                    // initialized in `$httpProvider`

        function get(url) {
            // do stuff, maybe use otherStuff
        }

        return {
            get: get
        };
    };
}

angular.provider('MyOtherProvider', MyOtherProvider);

Angular 只实例化了一次MyServiceProvider 和MyOtherProvider，但是里面发生的事情是不同的。