asp.net-mvc - 在微前端管理用户 session

Question

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

安全

独立可部署组件

在组件之间传递事件或共享数据

按母版页编排组件

Answer 1

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

Micro Frontends

Project Mosaic

Single SPA

模式大致分为两类:

控制仅驻留在客户端代码中的前端渲染(单个 SPA 执行此操作)

控制前端呈现部分驻留在客户端，部分驻留在服务器端

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

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

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

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

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

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

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

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

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

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

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

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

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

关于用户 session 、身份验证等。这是我们的设置:

授权服务器

一种。提供登录页面

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

客户端应用拦截fetch请求，插入 Authorization带有来自本地存储的 JWT token 的 header

Traefik 反向代理的 ForwardAuth用于检查 Authorization 中的 JWT 的功能到:

一种。验证用户的 session

湾识别用户

C。查找用户及其权限

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

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

湾应应用的适用权限

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

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

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

希望这是有帮助的。