html - react 微前端 : How do I pass authentication and other information from one Front end app to another Front end app?

Question

我正在开发一个系统，该系统由不同的后端微服务和一些相互关联的微前端应用程序组成(它们都是用 ReactJS 构建的)。

以下是我的用例(为简洁起见，我只在此处列出前端应用程序而忽略了后端服务):

我们有以下应用:

1. https://id.example.com - 处理用户登录、配置文件管理并向用户提供仪表板的前端，其中包含指向他/她有权访问的模块的链接。仪表板有链接，例如 Settings , Tickets , Campaigns , Analytics等
2. 我们使用 OAuth2 服务器进行身份验证，为我们提供 access_token和一个 refresh_token .获得这些 token 后，将显示仪表板屏幕
3. 现在，用户点击 Tickets ，它必须重定向到 https://tickets.example.com

当发生重定向时，我需要能够将身份验证信息(从 https://id.example.com 获得)传递给票证应用程序(位于 https://tickets.example.com )，以便票证应用程序可以在加载时验证 token 。

我知道我可以将用户重定向到 https://tickets.example.com?token=<auth_token>&refresh_token=<refresh_token> ，但我不确定这样做是否安全。

尝试使用 localStorage , 但似乎它们也与主机绑定(bind)在一起，我无法从 localStorage 中获得值(value)的 id.example.com来自内部tickets.example.com

此外，微前端是单独部署的，每个都有自己的子域(tickets.example.com、campaigns.example.com 等)，我知道可以使用 single-spa 等框架。和模块联合将它们加载到容器应用程序中。但这不是我喜欢的。

总而言之，我想知道如何在任意两个前端应用之间传递一些信息(例如身份验证 token 、 session 信息等)？

谢谢，斯里拉姆

Answer 1

您可以使用 redux 进行状态管理，并与您的其他微前端应用共享。您可以将您的身份验证数据存储在主应用程序 redux 状态中，并与其他应用程序共享。但为此，您需要将它们加载到容器应用程序中。

终极版 code-splitting还可以帮助您通过拆分 redux reducer 和主应用程序加载，将数据从其他应用程序共享到主应用程序。

你的情况不同。所以你可以使用 react-router 的 Link 组件。

示例:

    <Link 
     to={{ 
      pathname: "https://tickets.example.com",
      search: "?token=<auth_token>&refresh_token=<refresh_token>",
      state: { foo: 'foo' }
     }} 
     target="_blank"
    >
     Tickets
    </Link>

state 不适用于外部链接，因此您需要在 search 中传递数据。有一个最小选项可以通过 2 个不同的域传递数据。

你也可以试试cross-domain-storage for 允许跨域共享本地存储。

示例链接:Github