创建$ http拦截器作为独立模块时Angular中的依赖性错误

时间:2014-05-07 20:46:18

标签: javascript angularjs dependency-injection angularjs-module angular-http-interceptors

以下是我如何设置拦截器的工作示例,该拦截器将身份验证令牌附加到每个请求(这或多或少是来自https://docs.angularjs.org/api/ng/service/ $ http的示例)

angular.module("app", [])
.config(function ($httpProvider) {
  $httpProvider.interceptors.push("authInterceptor");
})
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
})

我的configrun块中有很多其他东西可以调用和启动来自不同角度模块的服务,所以我想稍微整理一下。但是我知道在config块中有一些非常具体的依赖注入规则,我不太明白,这些阻止我在一个单独的模块中定义我的authInterceptor工厂。正如configrun块中的其他逻辑调用应用程序中的其他模块一样,声明那里的拦截器看起来不合适。

这就是我想要做的事情:

angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
});

angular.module("app", [
 "services.authInterceptor"
]).config(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// Error: Unknown provider authInterceptor.

我尝试将其注入run块,但我猜你不允许在那里注入$httpProvider

angular.module("app", [
  "services.authInterceptor"
]).run(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// Error: Unknown provider: $httpProviderProvider <- $httpProvider

我应该在哪里注入模块,以便$httpProvider也可以注入,我应该在哪里添加拦截器到现有模块?我的主要目标是将拦截器和其他类似服务保存在自己的自包含模块中。

修改

我得到一个不同的错误,当我宣布provider而不是factory时,似乎让我更接近(出于某种原因,我一直认为这些可以互换):

angular.module("services.authInterceptor")
.provider("authInterceptor", function ($q) {
  return {}
})

// Error: Unknown provider: $q

所以它现在成功地将authInterceptor注入我的config块,但在尝试查找$q时失败。

1 个答案:

答案 0 :(得分:10)

在配置阶段,只能注入提供者和常量。这是为了防止服务在完全配置之前实例化。

这就是您按名称注册拦截器的原因(将名称作为字符串推入$httpProvider.interceptors数组)。它们将在运行时稍后解决。

这正是您在工作示例中所做的,以及您在第二步中需要做的事情,即使拦截器在另一个模块中也是如此:

angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
});

angular.module("app", ["services.authInterceptor"])
.config(function ($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

演示: http://plnkr.co/edit/A8SgJ87GOBk6mpXsoFuZ?p=preview