跨窗口通信与 single-spa 的实践

前端

2023-10-11 22:46:21

单点登录（SSO）是一种身份验证机制，允许用户使用单个凭据访问多个应用程序或系统。在单点登录方案中，用户只需在一个系统中登录一次，即可访问其他系统，无需再次输入凭据。

跨窗口通信是实现单点登录的关键部分。在单点登录场景中，通常需要在不同的窗口或标签页之间传递用户信息和认证令牌。这可以通过各种技术实现，例如 iframe、window.open 和 window.frames。

iframe

iframe（inline frame）是一种嵌入在 HTML 文档中的嵌入式窗口。它可以加载来自不同域的外部文档。通过使用 iframe，我们可以创建两个在不同域上运行的窗口之间的通信通道。

window.open

window.open 方法创建一个新的浏览器窗口或标签页。此窗口可以加载与父窗口不同的 URL。通过使用 window.open，我们可以创建两个在不同窗口中运行的窗口之间的通信通道。

window.frames

window.frames 属性返回一个包含当前窗口中所有帧的数组。我们可以使用此属性访问其他窗口中的帧，并与之进行通信。

数据序列化

在跨窗口通信中，数据需要在发送和接收窗口之间进行序列化和反序列化。这可以通过 JSON.stringify() 和 JSON.parse() 方法实现。

示例

以下是一个使用 window.open 实现跨窗口通信的示例：

// 父窗口
const childWindow = window.open("https://example.com", "childWindow");
childWindow.postMessage({ message: "Hello from parent" }, "https://example.com");

// 子窗口
window.addEventListener("message", (event) => {
  if (event.origin === "https://example.com") {
    console.log(event.data.message);
  }
});