Angular 库 : Separate HttpInterceptor

Question

我想要实现的目标

一个封装的应用程序(表单编辑器)，我可以在另一个 Angular 应用程序中使用，也可以在任何 Web 应用程序中使用。

---

想法

主要模块/组件可以实现为 Angular 库(主要组件为 shadow dom)，因此我可以添加一个“Angular 元素”包装器来构建 web 组件，但也可以将库本身作为 npm 包导入我的现有的 Angular 应用程序。所以我的 Angular 应用程序不会加载完整的 javascript 包，而只会加载模块，这些模块不是提供的，而是其他应用程序，以获得更好的性能和集成。

---

问题

对于来自库的每个请求，我想要一个 http 拦截器来登录/将 jwt token 添加到请求 header 。当我使用 Angular 元素包装器构建应用程序时(除了导入库和构建 webcomponent 之外什么都不做)，一切都运行良好。当我将它添加到 Angular 应用程序时，拦截器没有按预期工作，因为另一个应用程序也有一个拦截器。我只想将库拦截器封装到库中。所以我想我只需要再次在我的库中导入 HttpClientModule 并获取我自己的实例，这样同一文件中定义的 HTTP_INTERCEPTORS 提供程序就知道何时被触发。不幸的是，这个想法行不通，两者都在干扰。

应用模块

• 进口:
  • HttpClientModule(1)
  • 自定义库模块
• 供应商:
  • HTTP_INTERCEPTORS(1)

自定义库模块

• 进口:
  • HttpClientModule(2)
• 供应商:
  • HTTP_INTERCEPTORS(2)

在最好的情况下，我想将 CustomLibraryModule 导入到我的应用程序的延迟加载子模块中。

---

问题

我是否针对这种情况选择了正确的工具？你知道我在获取封装的 http 拦截器时做错了什么吗？

Answer 1

现在您说这个独立的表单编辑器知道您的后端需要 JWT，这让您感到困惑。 Web 组件应该不知道您的后端实现。

如果你有一个特定的后端，这个组件的所有实例都应该与之对话，那么你可以导出一个拦截器供任何 Angular 应用程序使用，或者你可以封装将 JWT 添加到请求中直接在你的代码中而不是完全使用拦截器。

此外，如果您在 Angular 之外的应用程序中使用它，您仍然需要在页面上使用 Angular(参见 https://angular.io/guide/elements