如何高性能连接两个React应用？主页与看板单/多应用选型及认证最佳实践

单应用还是拆分独立应用？ #

优先选择单React应用实现，仅在有特殊部署、团队协作需求时才考虑拆分双应用。

单应用的优势： #

• 路由逻辑统一管控，已登录用户访问首页自动跳转dashboard、未登录用户拦截dashboard访问的逻辑实现成本极低，不需要处理跨应用跳转的状态同步、闪屏问题
• 可以共享基础依赖（UI组件库、请求封装、工具函数等），减少整体代码体积，维护成本更低
• 打包部署流程简单，不需要多套CI/CD配置

什么时候适合拆分双应用： #

• 首页是纯静态营销页+登录注册入口，需要全量CDN缓存，而dashboard需要高频迭代、不能缓存
• 两个模块由完全独立的团队维护，部署节奏、技术栈版本完全不统一
• 有严格的安全要求，dashboard需要部署在内网环境，和首页的部署域完全隔离

该场景下的最佳实践和身份认证方案 #

1. 路由守卫实现 #

用React Router的嵌套路由+路由包装组件实现公开/受保护路由的分层管控：

• 公开路由组（首页、登录、注册）：已登录用户访问时直接重定向到dashboard
• 受保护路由组（dashboard全模块）：未登录用户访问时直接重定向到首页
  示例代码参考：

import { createBrowserRouter, Navigate, Outlet } from 'react-router-dom';
import React from 'react';

// 校验登录态的工具函数，可结合后端接口校验、缓存过期逻辑实现
const checkAuth = () => {
  return Boolean(document.cookie.includes('auth_token'));
};

// 受保护路由包装器
const RequireAuth = () => {
  return checkAuth() ? <Outlet /> : <Navigate to="/" replace />;
};

// 公开路由包装器，已登录用户访问自动跳dashboard
const PublicRoute = () => {
  return checkAuth() ? <Navigate to="/dashboard" replace /> : <Outlet />;
};

// 路由配置
const router = createBrowserRouter([
  {
    element: <PublicRoute />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/login', element: <LoginPage /> },
      { path: '/register', element: <RegisterPage /> }
    ]
  },
  {
    element: <RequireAuth />,
    children: [
      // dashboard模块用懒加载拆分，首屏不加载相关代码，和拆成双应用的加载体验一致
      { path: '/dashboard/*', element: React.lazy(() => import('./DashboardModule')) }
    ]
  }
]);

2. 身份认证实现方案 #

优先选择HttpOnly Cookie + JWT的方案，安全性和开发成本都最优：

• 登录成功后后端直接种带HttpOnly、Secure、SameSite属性的Cookie存储认证凭证，前端不需要手动存储、传递token，避免XSS攻击窃取凭证
• 前端请求配置withCredentials: true，自动携带Cookie给后端做权限校验
• 配置全局响应拦截器，遇到401未授权状态码时，直接清除本地用户缓存、跳转到首页

3. 额外最佳实践 #

• 前端路由守卫仅做体验优化，所有敏感数据、操作的权限校验必须在后端实现，不能依赖前端逻辑做安全管控
• 如果后续dashboard功能迭代越来越复杂，可以接入Module Federation做微前端拆分，既保留单应用的顺滑跳转体验，又能实现两个模块独立开发、独立部署
• 所有dashboard相关的代码用懒加载拆分，避免首页首屏体积过大，加载速度不受dashboard复杂度影响

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