在微前端管理用户会话

Question

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

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

Answer 1

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

1. 微锋
2. 马赛克工程
3. 单SPA

这些模式大致可分为两类：

1. 只驻留在客户端代码中的前端呈现的控制(单SPA可以做到这一点)
2. 前端呈现控制驻留在部分客户端、部分服务器端。

从技术上讲，你可以增加第三个：

1. 前端呈现的控制完全驻留在服务器端

我们实现了#2，上面所链接的项目也是这样做的。我们的设计与马赛克建筑略有不同。下面是我们的应用程序的工作方式：

1. 我们有一个描述要呈现的模板的存储库。我们使用Redis来实现这个功能，但这可能是您想要的任何数据存储。模板包含： 呈现模板的路径(这是一个正则表达式)。 b.模板中应呈现的“区域”。它们包含一个id和一个级别，以便负责呈现的服务能够正确地对模板进行排序。 c.应呈现模板中的“资源”。它们包含脚本和链接标记，这些标记将被放置到DOM上。 d.父模板(如果有的话)以及父模板上应呈现子模板的区域。
2. 我们有一个服务器端应用程序，它标识给定路由的适当模板，并为该路由构造DOM的JSON表示。
3. 我们有客户端应用程序将DOM部分表示为虚拟DOM，将服务器端应用程序返回的JSON表示转换为Virtual，它最终将路由更改时的实际更改呈现给DOM。 客户端应用程序还负责使用History API侦听更改，并在给定路径上查询后端对DOM表示形式的更新。
4. 我们用我们开发的一个通用模板来构建我们的微型前端。一旦完成，我们上传到一个CDN，并使用CDN的地址在上面的模板资源，以呈现前端沿着适当的路线。

这就是我们的前端应用程序是如何设计的。我们使用Kubernetes，并利用编写自定义控制器的优势，再加上自定义资源定义来轻松部署前端。但是，您可以简单地使用任何数据存储来实现这一点，不需要Kubernetes。

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

1. 授权服务器 提供登录页面。 成功登录后，在本地存储中设置JWT令牌。
2. 客户端应用程序拦截fetch请求，从本地存储插入带有JWT令牌的Authorization头。
3. Traefik反向代理的ForwardAuth特性用于检查Authorization中的JWT，以便： 验证用户的会话 b.识别用户 c.查找用户及其权限
4. 数据存储(Redis)，用于建立给定路由的授权要求。这非常类似于上面描述的模板。此数据存储中包含的授权信息包括： a.需求所属的路线(作为指标) b.应适用的权限 同样，在此基础上，我们创建了一个自定义控制器和自定义资源定义，以便轻松地创建和删除对应用程序的授权要求。但是，这是不必要的。 当请求通过反向代理发出时，将调用auth服务器，检查用户的令牌，查找它们的配置文件，查找路由的应用程序需求，并将其与赋予用户的权限进行比较。如果这是签出，响应返回Traefik，如果不是401 Not Authorized，则traefik拒绝请求。

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

希望这能帮上忙。