在微前端管理用户会话

Question

我们计划采用微前端，我们的项目是在 Asp.Net Core MVC 中，我们想要多个应用程序，每个应用程序由不同的团队拥有，他们可以在其中独立开发、测试、部署。我正在寻找的是，如果前端的每个组件都有自己的 URL，因为我们希望组件可以独立部署，那么单独的 URL 意味着它有自己的服务器和主机环境，那么我们如何管理跨多个组件的会话？如果有人可以指导微前端考虑：

1. 安全
2. 独立可部署组件
3. 在组件之间传递事件或共享数据
4. 按母版页编排组件

Answer 1

你的问题很开放。我们在过去一年中实施了微前端，所以我们是这样做的。这绝不是做微前端的“唯一方法”。如果您还没有看过这些，那么它们值得一读，因为它们涵盖了设计微前端时出现的最常见的架构模式：

1. 微前端
2. 马赛克计划
3. 单人SPA

模式大致分为两类：

1. 控制仅驻留在客户端代码中的前端渲染（单个 SPA 执行此操作）
2. 控制前端呈现部分驻留在客户端，部分驻留在服务器端

从技术上讲，您可以添加第三个：

3. 控制完全驻留在服务器端的前端渲染

我们实施了#2，上面链接的 Project Mosaic 也这样做了。我们的设计与马赛克架构略有不同。以下是我们的应用程序的工作原理：

1. 我们有一个描述要呈现的模板的商店。我们为此使用 Redis，但这可以是您想要的任何数据存储。模板包含：

   一种。应沿其呈现模板的路线（这是一个正则表达式）

   湾 应呈现的模板中的“区域”。这些包含一个 id 和一个等级，以便负责渲染的服务可以正确地对模板进行排序

   C。应呈现的模板中的“资源”。这些包含将放置在 DOM 上的脚本和链接标签。

   d. 父模板（如果有）以及父模板上应呈现子模板的区域

2. 我们有一个服务器端应用程序，它识别给定路由的正确模板，并为该路由构造一个 DOM 的 JSON 表示。

3. 我们有客户端应用程序将 DOM 的部分表示维护为 Virtual DOM，将服务器端应用程序返回的 JSON 表示呈现到 Virtual DOM 中，用于最终将 DOM 的实际更改呈现为路由变化。

   客户端应用程序还负责使用 History API 侦听更改，并在给定路由上查询后端以获取对 DOM 表示的更新。

4. 我们从我们开发的通用模板构建我们的微前端。完成后，我们上传到 CDN，并使用上述模板资源中的 CDN 地址沿着适当的路线渲染前端。

粗略地说，这就是我们的前端应用程序的设计方式。我们使用 Kubernetes，并利用编写自定义控制器和自定义资源定义来轻松部署我们的前端。但是，您可以简单地使用任何数据存储来执行此操作，不需要 Kubernetes。

关于用户会话、身份验证等。这是我们的设置：

1. 授权服务器

   一种。提供登录页面

   湾 成功登录后在本地存储中设置 JWT 令牌

2. 客户端应用程序拦截fetch请求，Authorization从本地存储插入带有 JWT 令牌的标头

3. Traefik 反向代理的ForwardAuth功能，用于检查以下内容中的 JWT Authorization：

   一种。验证用户的会话

   湾 识别用户

   C。查找用户及其权限

4. 数据存储 (Redis) 为给定路由建立授权要求。这与上述模板非常相似。此数据存储中包含的授权信息包括：

   一种。需求所属的路由（作为正则表达式）

   湾 应应用的适用权限

   同样，我们为此创建了一个自定义控制器和自定义资源定义，以便轻松创建和删除对我们的应用程序的授权要求。但是，这不是必需的。

   当请求通过反向代理时，将调用身份验证服务器，检查用户的令牌，查找他们的个人资料，查找路由的应用程序要求并与授予用户的权限进行比较。如果这检查出来，则响应可以返回给 Traefik，如果不是，则401 Not Authorizedtraefik 拒绝请求。

这都是一个相当高的水平。但是，这对我们来说实际上是一个非常好的设计，因为我们只有几个地方处理授权，开发人员在编写前端（或后端，因为我们也使用微服务）时不必关注授权后端架构）。

希望这是有帮助的。