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

Question

我是Angular，JWT，oAuth和CORS的新手。

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

我知道CORS可以进行跨域通信，因此UI应该能够与没有托管它的服务器进行通信......但是我想弄清楚我们是否可以启动仅限UI的Angular应用程序并在启动时传入JWT令牌。所有在线示例都让UI通过用户/传递发送请求以便接收令牌。本质上，我们希望服务团队处理所有IdP /令牌/等工作，而UI只关注UI。

非常高级别的概念：

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

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

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

Answer 1

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

providers：[{provide：MyCustomInjectableClass，useValue：somePredefinedObjectHere}]

您只需要确保每次应用程序被提升时预定义对象都会正确导入到模块文件中。

此外，许多人使用Angular的注射令牌类：

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