我可以使用从单独的服务器传入的 JWT 启动独立的 Angular 2 应用程序吗？

Posted 2023-03-10

【中文标题】我可以使用从单独的服务器传入的 JWT 启动独立的 Angular 2 应用程序吗？

【英文标题】：Can I launch a standalone Angular 2 application with a JWT passed in from a separate server?

【发布时间】：2018-01-30 02:41:02

【问题描述】：

我对 Angular、JWT、oAuth 和 CORS 还很陌生。

出于各种原因，我们希望将我们的团队分成 2 个不同的角色（基于地理位置）。我们有一个团队专注于服务层（带有 RESTful API 的 Spring 层），而另一个团队将专注于仅 UI（可能出于其他一些原因从单独的服务器部署）。

我知道使用 CORS 可以进行跨域通信，因此 UI 应该能够与未托管它的服务器进行通信...但我正在尝试确定我们是否可以启动仅 UI 的 Angular应用程序并在启动时传入 JWT 令牌。所有在线示例都有 UI 发送带有用户/通行证的请求以接收令牌。本质上，我们希望服务团队处理所有 IdP/token/etc 工作，而 UI 只专注于 UI。

非常高级的概念：

服务器端使用基本的 .jsp 页面将用户重定向到我们的身份验证服务，然后对用户进行身份验证。 一旦用户通过身份验证，服务层团队将启动我们单独的用户界面（使用 Angular 编写）并向 UI 传递令牌以建立信任关系。

我的问题涉及可能（应该）发生的高级工作流程。我假设我有 2 个选项，但不确定哪个会被推荐。

是否可以/应该使用传入的令牌启动 Angular 应用程序（“仅 UI”）？本质上，接收一个令牌作为请求参数？ 可以/应该首先启动 Angular 应用程序，然后立即请求令牌（可能在 Angular 生命周期事件中）？

【问题讨论】：

应用启动需要token吗？如果不是，我只会在必要时请求令牌

【参考方案1】：

是的，这应该不是问题。在引导主 Angular 应用程序的模块中，您可以指定自定义提供程序，让您为应用程序进行运行时配置/输入。在主要 NgModule 的提供者行中，您可以执行以下操作：

提供者：[ provide: MyCustomInjectableClass, useValue: somePredefinedObjectHere ]

您只需要确保每次应用被引导时都将预定义的对象正确导入到模块文件中。

此外，很多人为此使用 Angular 的 Injection Token 类：

https://angular.io/api/core/InjectionToken

文档非常少，就像 Angular 2 / 4 一样，但是如果您搜索“不透明令牌”以及“注入令牌”，您会看到它是如何完成的。他们弃用了 OpaqueToken 并替换为 Injection Token，但它们本质上是相同的，只是输入了注入令牌。这里有一些很好的资源：

Angular 2 OpaqueToken vs Angular 4 InjectionToken

What is in Angular 2 Opaque Token and What's the Point?

这是一个相当复杂但真实的示例，说明如何使用注入令牌和模块提供程序元数据来提供各种类型的运行时配置：https://github.com/angular/angular/blob/master/packages/platform-webworker/src/worker_render.ts#L97