Angular跨应用跳转时传递用户数据的实现方案（sessionStorage不可用）

方案1：URL加密传参（轻量场景首选） #

• 实现逻辑：跳转前把需要传递的用户信息序列化成JSON字符串，用双方预先约定的对称加密算法（比如AES）加密后拼接到目标URL的query参数中，目标应用加载后从location.search中取出参数解密即可使用。
• 示例代码：
  跳转前加密拼接逻辑：

  import CryptoJS from 'crypto-js';
  
  // 双方约定的密钥，不要对外泄露
  const SECRET_KEY = 'your-custom-secret-key';
  // 序列化用户数据
  const userDataStr = JSON.stringify({
    user: userInfo.email,
    name: userInfo.given_name,
    isLoggedIn: true
  });
  // 加密
  const encrypted = CryptoJS.AES.encrypt(userDataStr, SECRET_KEY).toString();
  // 拼接URL跳转
  document.location.href = `${this.Url}?userData=${encodeURIComponent(encrypted)}`;
  

  目标应用解密逻辑：

  const queryParams = new URLSearchParams(location.search);
  const encryptedData = queryParams.get('userData');
  if (encryptedData) {
    const bytes = CryptoJS.AES.decrypt(decodeURIComponent(encryptedData), SECRET_KEY);
    const userData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
    // 后续直接使用userData即可
  }
  

• 优缺点：实现简单无额外后端依赖，仅适合数据量较小的场景，注意不要明文传输敏感数据。

方案2：同根域名下共享存储（同根域场景适用） #

• 适用场景：两个应用的根域名一致，比如主应用是a.example.com，目标应用是b.example.com
• 实现逻辑：存储数据时显式指定Cookie的domain为根域名，所有子域名下的应用都可以读取到同一份Cookie数据
• 示例存储逻辑：

  // 存数据时设置domain为根域名，所有子域名都可访问
  document.cookie = `user=${userInfo.email}; domain=example.com; path=/`;
  document.cookie = `name=${userInfo.given_name}; domain=example.com; path=/`;
  document.cookie = `isLoggedIn=true; domain=example.com; path=/`;
  

• 优缺点：不需要额外传参，数据不会暴露在URL中，仅支持同根域名的应用，跨根域名不可用。

方案3：后端临时中转（高安全/大数据量场景首选） #

• 实现逻辑：
  1. 主应用跳转前先把用户身份数据上传到两个应用共用的后端服务，后端生成一个有效期短、仅可使用一次的临时凭证，把用户数据和凭证绑定存入Redis等临时存储
  2. 主应用把临时凭证拼到URL后跳转到目标应用
  3. 目标应用拿到临时凭证后调用后端接口兑换用户数据，后端校验凭证有效性后返回数据，同时销毁该临时凭证避免重复使用
• 优缺点：安全性最高，没有数据长度限制，支持完全跨域的应用，需要后端配合开发对应接口。

方案4：postMessage跨窗口通信（新开标签页场景适用） #

• 适用场景：主应用是通过window.open新开标签页打开目标应用，不是当前页直接跳转
• 实现逻辑：主应用打开新窗口后，通过postMessage把用户数据发送给目标应用，目标应用监听message事件接收数据，注意校验消息来源的origin避免数据泄露
• 示例代码：
  主应用发送逻辑：

  const targetWindow = window.open(this.Url);
  // 等目标窗口加载完成后发消息
  targetWindow.onload = () => {
    targetWindow.postMessage(
      {
        type: 'userAuthData',
        data: {
          user: userInfo.email,
          name: userInfo.given_name,
          isLoggedIn: true
        }
      },
      // 填目标应用的origin，不要写*避免安全问题
      'https://target-app.example.com'
    );
  }
  

  目标应用接收逻辑：

  window.addEventListener('message', (event) => {
    // 校验来源必须是主应用的origin
    if (event.origin !== 'https://main-app.example.com') return;
    if (event.data.type === 'userAuthData') {
      const userData = event.data.data;
      // 后续使用即可
    }
  })
  

• 优缺点：可以传任意大小的数据，不会暴露在URL中，仅支持新开标签页的跳转场景，当前页直接跳转无法使用。

补充说明：你原来的方案不生效是因为sessionStorage的隔离级别是同源+同浏览器标签页，只要页面跳转或者新开标签，哪怕是同域名的应用都无法读取之前的sessionStorage数据，跨域应用更是完全无法访问。

内容的提问来源于stack exchange，提问作者Zapp