Angular库：分离Http拦截器

Question

我的目标

一个封装的应用程序（表单编辑器），我可以在另一个angular应用程序中使用它，也可以在任何网络应用程序中使用。

---

想法

主要模块/组件可以作为angular库实现（主要组件作为阴影DOM），因此我可以添加'angular elements'包装器来构建webcomponent，但也可以将库本身作为npm包导入到我的现有angular应用程序中。因此，我的angular应用程序不会加载完整的JavaScript包，而只加载未提供但其他应用程序的模块，以获得更好的性能和集成。

---

问题

对于库的每个请求，我希望有一个http拦截器来登录/将jwt令牌添加到请求头。当我使用angular elements包装器构建应用程序时（除了导入库并构建webcomponent之外什么也不做），一切正常。当我将其添加到angular应用程序中时，拦截器不能按预期工作，因为其他应用程序也有拦截器。我想将库的拦截器封装到库中。因此，我认为我只需要再次在库中导入HttpClientModule，并获取自己的实例，这样同一文件中定义的HTTP_INTERCEPTORS提供程序就知道何时触发。不幸的是，这个想法行不通，两者都会干扰。

AppModule

• 导入：
  • HttpClientModule（1）
  • CustomLibraryModule
• 提供程序：
  • HTTP_INTERCEPTORS（1）

CustomLibraryModule

• 导入：
  • HttpClientModule（2）
• 提供程序：
  • HTTP_INTERCEPTORS（2）

在最好的情况下，我希望将CustomLibraryModule导入到我的应用程序的惰性加载的子模块中。

---

问题

我选对了这种情况的工具吗？您知道我做错了什么来获取封装的http拦截器吗？

- NePheus

---

你无法在不使用延迟加载的情况下封装一个拦截器。这是一个奇怪的想法，因为我不知道在什么情况下会发现跨应用程序使用库对我的请求添加JWT有用，但如果您想要这样做，就需要包装http服务。 - bryan60

@bryan60 我认为你可以封装它。但我同意你的第二个观点：为什么要为表单库发出HTTP请求？如果我在你的源代码中看到这一点，我会不愿意使用它... - user4676340

@Maryannah，请查看有关拦截器的使用说明：https://angular.io/api/common/http/HttpInterceptor。你唯一可以拥有“封装”的拦截器是在懒加载模块中...这不是一个预期/支持的用例，更多是懒加载的意外副作用，可能会在未来的版本中出现问题。否则，新的HttpClientModule导入将覆盖之前的导入。 - bryan60

@bryan60 哦，好的，我从来没有见过那个。谢谢你提供的信息！ - user4676340

使用案例：此表单编辑器与后端连接。您可以使用表单添加项目，也可以编辑现有项目。每个字段在失去焦点时保存。还加载了一些主题数据，因为它是多客户目的。此表单编辑器应作为仪表板的一部分集成，但也应作为Web组件独立运行，以便在每个系统上独立运行。 - NePheus

Answer 1

现在你正在混淆问题，因为这个独立的表单编辑器知道你的后端需要JWT。Web组件不应该知道你的后端实现。

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

另外，如果你在Angular之外的应用程序中使用它，仍然需要将Angular放在页面上（请参见https://angular.io/guide/elements）。

- observingstream

Answer 2

经过一些研究，我发现了CustomLibraryModule没有使用自己的拦截器而是使用了主应用程序的拦截器的原因。该库使用由nswag(.NET后端)生成的API类。不幸的是，生成的可注入类被配置为单例，因此每个类都带有装饰符。

@Injectable({ providedIn: 'root' })

我改变了这个配置，现在它们只是用装饰符装饰。

@Injectable()

此外，我将API类添加到我的模块的“providers”部分中。现在，它的构造函数使用惰性加载模块的HttpClient引用并调用正确的拦截器。

由于缺乏理解，我慢慢地移动到了我的代码的这一部分。最终这是我的错，但是我感谢您的帮助和解释。

- NePheus

---

这太棒了，能看到你是如何做到的会很好。我喜欢你拦截器的源代码以及它被引入的方式。 - imnickvaughn