在Micro Frontend中管理用户会话

Question

我们计划采用微型前端，我们的项目在Asp.Net Core MVC中，在该项目中，我们希望多个应用程序分别由不同的团队拥有，它们可以在其中独立开发，测试和部署。我要寻找的是，如果前端每个组件都具有自己的URL（我们希望组件可独立部署），那么单独的URL意味着它是自己的服务器和主机环境，从而可以跨多个组件管理会话？ 如果有人可以考虑以下方面，也可以提供很好的指导：

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

Answer 1

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

1. Micro Frontends
2. Project Mosaic
3. Single SPA

模式大致分为两类：

1. 控制仅位于客户端代码中的前端渲染（单个SPA可以做到）
2. 部分位于客户端，部分位于服务器端的前端呈现控件

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

1. 完全位于服务器端的前端渲染控件

我们实现了＃2，上面链接的Project Mosaic也这样做。我们的设计与Mosaic建筑略有不同。这是我们的应用程序的工作方式：

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

   a。模板应呈现的路径（这是一个正则表达式）

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

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

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

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

3. 我们有一个客户端应用程序，将DOM的部分表示形式维护为虚拟DOM，将服务器端应用程序返回的JSON表示形式呈现到虚拟DOM中，该代码最终用于呈现实际更改随路线变化而移至DOM。

   客户端应用程序还负责使用History API监听更改，并查询后端以沿给定路径更新DOM表示形式。

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

这是我们的前端应用程序的大致设计方式。我们使用Kubernetes，并利用编写自定义控制器的优势以及自定义资源定义来轻松部署我们的前端。但是，您可以使用任何数据存储简单地做到这一点，不需要Kubernetes。

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

1. 授权服务器

   a。提供登录页面

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

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

3. Traefik反向代理的ForwardAuth功能可将Authorization中的JWT检查为：

   a。验证用户的会话

   b。识别用户

   c。查找用户及其权限

4. 数据存储（Redis），用于建立给定路由的授权要求。这非常类似于上述模板。该数据存储区中包含的授权信息包括：

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

   b。应该应用的适用权限

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

   当请求通过反向代理到达时，将调用auth服务器，检查用户的令牌，查找其个人资料，并查找路由的应用程序要求，并将其与授予用户的权限进行比较。如果检查成功，则返回给Traefik的响应是正确的，否则返回401 Not Authorized，并且traefik拒绝该请求。

这一切都相当高。但是，对于我们来说，这实际上是一个非常好的设计，因为只有少数几个地方需要处理授权，并且开发人员在编写前端（或后端）时不必特别注意授权，因为我们也使用微服务后端的体系结构。

希望这会有所帮助。