如何为同服务器不同端口的两个create-react-app React应用实现通用登录页

嘿，这个问题问得好！同一服务器下多React应用共享登录状态是个挺常见的场景，我给你梳理几个在生产环境里验证过的靠谱方案，你可以根据自己的技术栈和扩展性需求来选：

方案1：基于Cookie的共享认证（最直接高效） #

因为两个应用在同一域名下（只是端口不同），Cookie默认是端口无关的（只要域名一致），这是最省心的方案：

• 先做一个独立的登录页面（可以是个极简的React项目，甚至直接用后端渲染的页面），也可以把登录页挂载到其中一个应用里，但独立出来后续维护更灵活。
• 登录验证通过后，把用户核心认证信息（比如JWT Token、用户ID）存在HttpOnly + Secure + SameSite=Strict的Cookie里，注意设置domain为你的服务器根域名（不要带端口），path=/让所有子路径都能访问。示例代码：

// 登录成功后设置Cookie（推荐由后端接口返回时设置，更安全）
document.cookie = `authToken=${yourJwtToken}; domain=your-server.com; path=/; HttpOnly; Secure; SameSite=Strict`;

• 两个React应用在初始化阶段，直接读取这个Cookie里的Token，通过各自的后端接口验证Token合法性，验证通过后即可加载用户态内容。
• 开发环境下，localhost域名的Cookie默认支持跨端口共享，直接测试就行；生产环境要确保域名配置正确，避免Cookie被浏览器拦截。

方案2：LocalStorage + 跨窗口通信（适合Cookie受限场景） #

如果因为某些原因不能用Cookie，可以用localStorage配合postMessage实现状态共享：

• 登录页登录成功后，把认证信息存在自己的localStorage里。
• 当两个应用启动时，通过window.postMessage向登录页所在窗口发送获取认证信息的请求；登录页监听消息，验证请求来源的合法性后，把认证信息回传给应用。
• 示例代码：

  // 应用A发送认证信息请求
  window.postMessage({ type: 'GET_AUTH_DATA' }, 'http://your-server:3000');
  
  // 登录页监听并返回数据
  window.addEventListener('message', (event) => {
    // 严格验证来源，防止恶意请求
    if (!['http://your-server:3001', 'http://your-server:3002'].includes(event.origin)) return;
    if (event.data.type === 'GET_AUTH_DATA') {
      const authData = localStorage.getItem('userAuth');
      event.source.postMessage({ type: 'AUTH_DATA_RESPONSE', data: authData }, event.origin);
    }
  });
  
  // 应用A接收并存储数据
  window.addEventListener('message', (event) => {
    if (event.origin !== 'http://your-server:3000') return;
    if (event.data.type === 'AUTH_DATA_RESPONSE') {
      localStorage.setItem('userAuth', event.data.data);
      // 初始化应用的用户状态
    }
  });
  

• 注意：一定要验证event.origin，避免跨站脚本攻击风险。

方案3：统一后端认证服务（推荐长期维护） #

如果后续还可能新增更多应用，建议搭建一个独立的认证后端服务，把所有认证逻辑集中管理：

• 用Node.js/Java/Golang等搭建一个专门的认证服务，负责处理登录、Token发放、Token验证等逻辑。
• 登录页向认证服务发起登录请求，成功后服务端返回JWT Token（同时可以把Token存在Cookie里）。
• 两个React应用在请求各自的业务后端接口时，通过请求头（比如Authorization: Bearer ${token}）带上Token，业务后端和认证服务集成，调用认证服务的接口验证Token合法性。
• 这种方案的好处是扩展性极强，后续加新应用只需对接统一的认证服务，不用重复开发登录逻辑，而且安全逻辑集中维护，更易管控。

额外实践建议 #

• 不管用哪种方案，都要重视安全：Cookie必须加HttpOnly防止XSS，SameSite=Strict防止CSRF；JWT要设置合理的过期时间，同时配套刷新Token机制。
• 可以给登录页加redirect参数，比如应用A未登录时跳转到/login?redirect=http://your-server:3001，登录成功后自动跳回原应用，提升用户体验。

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