我想要实现的目标
一个封装的应用程序(表单编辑器),我可以在另一个 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 拦截器时做错了什么吗?
最佳答案
现在您说这个独立的表单编辑器知道您的后端需要 JWT,这让您感到困惑。 Web 组件应该不知道您的后端实现。
如果你有一个特定的后端,这个组件的所有实例都应该与之对话,那么你可以导出一个拦截器供任何 Angular 应用程序使用,或者你可以封装将 JWT 添加到请求中直接在你的代码中而不是完全使用拦截器。
此外,如果您在 Angular 之外的应用程序中使用它,您仍然需要在页面上使用 Angular(参见 https://angular.io/guide/elements
关于 Angular 库 : Separate HttpInterceptor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58136385/