使用postMessage在跨端口应用程序之间共享JWT

Question

我的本地主机上运行两个应用程序，每个应用程序在不同的端口上（本地主机：3000 和本地主机：3002）。我的目标是将用户从 localhost:3000 重定向到 localhost:3002，同时在两个应用程序之间传递 JWT（JSON Web 令牌）。但是，我当前使用

postMessage

方法的实现并未按预期工作。

这是我尝试过的：

发件人（本地主机：3000）：

        const targetWindow = window.open("http://localhost:3002", "_blank");

            if (targetWindow) {
                targetWindow.addEventListener("load", () => {
                    // The target window has fully loaded, now you can send the message
                    const jwtToken = "your_jwt_token_here";
                    targetWindow.postMessage({ jwtToken }, "http://localhost:3002");
                });
            }

接收者（本地主机：3002）：

  useEffect(() => {
    window.addEventListener("message", (event) => {
      if (event.origin === "http://localhost:3000") {
          const { jwtToken } = event.data;
        }
    });
  }, [])

但是，当我打印“message”事件时，我在控制台中没有看到任何消息。您能帮我找出可能导致此问题的原因吗？有没有更好的方法来实现我在不同端口上运行的这两个应用程序之间共享 JWT 的目标？

任何见解或指导将不胜感激。

Answer 1

JWT 令牌可以安全地公开发布，因此相当标准的方法是提供一个查询参数：

localhost:3002?JWT=my-jwt-token

，稍后从那里提取该参数并由

localhost:3002

的任何后端进行验证。

这是我能想象到的最简单的解决方案，没有隐藏的不需要的副作用。