8

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

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

1 回答 1

11

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

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

这些模式大致分为两类：

  1. 仅驻留在客户端代码中的前端渲染控制（Single SPA 执行此操作）
  2. 控制部分位于客户端、部分位于服务器端的前端渲染

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 授权服务器

    一个。提供登录页面

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

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

  3. Traefik 反向代理的ForwardAuth功能，用于检查Authorizationto 中的 JWT：

    一个。验证用户的会话

    湾。识别用户

    C。查找用户及其权限

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

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

    湾。应应用的适用权限

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

    当请求通过反向代理时，会调用 auth 服务器，检查用户的令牌，查找他们的配置文件，查找路由的应用程序要求，并与授予用户的权限进行比较。如果检查成功，则返回到 Traefik 的响应是 OK，如果不是，则401 Not Authorizedtraefik 拒绝该请求。

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

希望这会有所帮助。

于 2019-10-29T04:42:56.990 回答