如何在不同域名的Angular应用间传递Token？不使用查询参数

针对你两个不同域名Angular应用的Token传递需求，以下几个方案可以实现，且无需使用查询参数：

1. PostMessage API 直接通信 #

这是跨域前端通信的标准方案，支持不同域名下的窗口/iframe之间传递数据。

实现步骤： #

• App1（登录端）：用户登录成功后，通过window.open打开App2页面，待页面加载完成后，用postMessage发送Token：

// App1 登录组件代码
loginSuccess(token: string) {
  const app2Window = window.open('https://app2.com', '_blank');
  
  // 监听App2加载完成事件，确保能正常发送消息
  const checkLoaded = setInterval(() => {
    if (app2Window?.document.readyState === 'complete') {
      app2Window.postMessage(
        { type: 'AUTH_TOKEN', token: token },
        'https://app2.com' // 限定接收域名，提升安全性
      );
      clearInterval(checkLoaded);
    }
  }, 100);
}

• App2（接收端）：在根组件或初始化模块中监听message事件，验证消息来源后接收Token：

// App2 根组件代码
ngOnInit() {
  window.addEventListener('message', (event) => {
    // 严格验证消息来源域名，防止恶意攻击
    if (event.origin !== 'https://app1.com') return;
    
    if (event.data.type === 'AUTH_TOKEN') {
      const token = event.data.token;
      // 处理Token：存入localStorage、设置请求头等
      localStorage.setItem('authToken', token);
    }
  });
}

注意：必须严格校验event.origin，避免接收恶意域名的消息，同时消息内容建议做加密处理（比如AES加密），防止传输过程中被窃取。

2. 后端中转方案 #

通过后端服务完成Token的传递，完全避开前端跨域传递的风险，安全性更高。

实现步骤： #

• App1后端：用户登录成功后，生成一个一次性临时凭证（比如短有效期的UUID），将该凭证与Token绑定存储（如Redis），然后跳转至App2时，把这个临时凭证通过隐藏表单提交：

// App1 登录组件代码，通过表单POST跳转
loginSuccess(token: string) {
  // 先调用后端接口生成临时凭证
  this.authService.generateTempToken(token).subscribe(tempId => {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = 'https://app2.com/auth/callback';
    form.target = '_blank';
    
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'tempId';
    input.value = tempId;
    
    form.appendChild(input);
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  });
}

• App2后端：接收临时凭证后，调用App1后端接口验证并换取正式Token，再返回给App2前端：

// App2 后端回调接口示例（Node.js/Express）
app.post('/auth/callback', async (req, res) => {
  const tempId = req.body.tempId;
  // 调用App1后端接口，用tempId换取token
  const token = await axios.get(`https://app1.com/api/exchange-token?tempId=${tempId}`);
  
  // 将Token存入App2的Cookie或返回给前端
  res.cookie('authToken', token, { httpOnly: true, secure: true });
  res.redirect('/dashboard');
});

优势：Token完全不经过前端暴露，安全性极高；无需处理前端跨域的复杂逻辑，适合对安全要求高的场景。

3. 主域名共享Cookie（限同主域子域名场景） #

如果你的两个应用是同主域的子域名（比如app1.example.com和app2.example.com），可以通过设置Cookie的domain属性实现共享：

实现步骤： #

• App1后端：设置Cookie时指定主域名：

// App1 后端设置Cookie示例
res.cookie('authToken', token, {
  domain: '.example.com', // 主域名，注意前面的点
  path: '/',
  httpOnly: true,
  secure: true,
  sameSite: 'None' // 跨域场景下需要设置
});

• App2前端：直接读取Cookie中的Token即可：

// App2 读取Cookie
getTokenFromCookie() {
  const cookies = document.cookie.split(';');
  for (const cookie of cookies) {
    const [name, value] = cookie.trim().split('=');
    if (name === 'authToken') {
      return value;
    }
  }
  return null;
}

限制：仅适用于同主域的子域名，不同顶级域名（如app1.com和app2.com）无法使用该方案；且现在浏览器对第三方Cookie的限制越来越严格，可能存在兼容性问题。

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