ReactJS微前端认证场景：如何独立开发依赖Token的子应用？

你当前的开发模式不是必要流程，微前端的核心优势之一就是子应用可以独立开发、部署，下面是几个可行的优化方案：

1. 本地开发环境注入Mock Token #

在子应用的本地开发配置中，直接添加模拟的访问令牌，让API请求在开发环境自动使用这个Token，无需依赖父应用传递。

举个Axios请求拦截器的例子：

// 子应用API请求工具类
import axios from 'axios';

const apiClient = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL });

apiClient.interceptors.request.use(config => {
  // 仅在开发环境生效，且未传入父应用Token时使用Mock值
  if (import.meta.env.DEV && !config.headers.Authorization) {
    // 可以把测试Token存在环境变量里，避免硬编码
    config.headers.Authorization = `Bearer ${import.meta.env.VITE_MOCK_ACCESS_TOKEN}`;
  }
  return config;
});

export default apiClient;

然后在子应用的.env.development文件中配置：

VITE_MOCK_ACCESS_TOKEN=your-test-environment-access-token

这个测试Token可以从后端测试环境获取，或者让后端提供一个长期有效的测试用Token。

2. 子应用内置开发环境认证降级逻辑 #

在子应用的入口挂载逻辑中，判断是否处于开发环境且未收到父应用传递的Token，此时触发本地简易认证流程：

// 子应用挂载入口
export function mount(props) {
  let accessToken = props.accessToken;

  // 开发环境下自动补全Mock Token
  if (import.meta.env.DEV && !accessToken) {
    // 可选：弹出本地测试登录框，让开发者输入测试账号获取Token
    // 或者直接赋值预设的测试Token
    accessToken = 'your-fixed-test-token';
  }

  // 将Token注入应用全局状态或API工具
  window.__APP_ACCESS_TOKEN__ = accessToken;
  // 初始化并渲染应用
  renderApp();
}

这种方式让子应用在开发环境下具备自我初始化的能力，不需要依赖父应用的props。

3. 搭建极简本地开发基座 #

为子应用单独编写一个仅用于本地开发的极简基座，模拟父应用的传参逻辑：

<!-- 子应用本地开发基座 index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Dashboard 本地开发</title>
</head>
<body>
  <div id="sub-app-root"></div>
  <script type="module">
    // 导入子应用的挂载方法
    import { mount } from './src/mount';
    // 模拟父应用传递的props
    const mockParentProps = {
      accessToken: 'your-test-token',
      // 其他父应用传递的props也可以在这里模拟
    };
    // 挂载子应用
    mount(mockParentProps, document.getElementById('sub-app-root'));
  </script>
</body>
</html>

然后修改子应用的开发服务器配置，默认使用这个本地基座启动，这样启动子应用时就完全不需要依赖父应用了。

4. 协调后端开放开发环境API权限 #

和后端团队沟通，让测试环境的API支持两种认证模式：

• 正常模式：使用父应用传递的正式Token
• 开发模式：允许使用固定的测试Token，甚至直接跳过Token校验
  这种方式从根源上解决子应用的API依赖问题，开发时不需要关心Token的来源。

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