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

Dependency errors in Angular when creating an $http interceptor as a standalone module

本文关键字：模块 独立 错误 依赖 创建 http Angular      更新时间：2023-09-26

下面是我如何设置一个拦截器的工作示例，该拦截器将身份验证令牌附加到每个请求(这或多或少是来自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
  }
})

在我的config和run块中有很多其他的东西，它们从不同的角度模块调用和启动服务，所以我想整理一下。然而，我知道在config块中有一些非常具体的依赖注入规则，我不太理解，这些规则阻止我在单独的模块中定义我的authInterceptor工厂。当config和run块中的其他逻辑调用应用中的其他模块时，声明拦截器在那里看起来不合适。

这就是我想要做的:

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。

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

这就是为什么你按名称注册拦截器(将名称作为字符串推入$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

相关文章：