角http拦截器

Question

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

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

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

因此，在我们的拦截器的request部分，我们调用一个负责刷新访问令牌的服务，在该方法返回的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端点。

这是角的设计吗?当一个新的http请求是从拦截器的请求方法中发出时，不应用拦截器吗？

Answer 1

您的代码流如下：

( 0) AngularJS定义了$httpProvider；

1)定义了loginService，它依赖于$httpProvider注入$http；

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

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

看看这函数，任何AngularJS提供者都必须提供的$get方法。每当您的服务将$http注入到依赖项和返回 $http中时，都会调用它。

现在，如果您返回到第396项，您将看到在调用$get时构建了一个reversedInterceptors列表。它是一个局部变量，所以返回的$http实例将能够使用它，这就是这里的答案，reversedInterceptors是您注入的$http的每个“实例”的不同引用。

因此，在$http (1)中注入的loginService与所有其他服务(3)中注入的不同之处在于，它的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);

角只实例化MyServiceProvider和MyOtherProvider一次，但内部情况不同。