如何在single-spa中实现未认证用户不加载微前端并跳转登录？

1. 全局维护认证状态 #

在根配置文件中添加认证状态管理，从本地存储读取初始状态，同时提供状态更新方法供登录微前端调用：

// 从localStorage读取初始认证状态，登录成功后更新
let isAuthenticated = !!localStorage.getItem('authToken');

// 全局状态更新方法，供登录微前端触发
window.updateAuthStatus = (status: boolean) => {
  isAuthenticated = status;
  // 触发single-spa重新评估应用激活状态
  singleSpa.triggerAppChange();
};

2. 改造仪表盘应用的激活逻辑 #

在activeWhen中加入认证判断，未认证访问仪表盘时自动跳转登录页，且不加载该微前端：

registerApplication({
  name: "@app/dashboard",
  app: () => System.import<LifeCycles>("@app/dashboard"),
  activeWhen: (location) => {
    const isDashboardPath = location.pathname === '/dashboard';
    // 未认证且访问仪表盘时跳转登录页
    if (isDashboardPath && !isAuthenticated) {
      location.href = '/';
    }
    // 仅当已认证且路径匹配时激活应用
    return isDashboardPath && isAuthenticated;
  }
});

3. 登录微前端处理认证成功逻辑 #

在登录组件的成功回调中，存储认证凭证并通知根配置更新状态：

// 登录组件内的登录成功处理
loginSuccess(token: string) {
  localStorage.setItem('authToken', token);
  // 调用全局方法更新认证状态
  (window as any).updateAuthStatus(true);
  // 跳转至仪表盘
  window.location.href = '/dashboard';
}

4. 初始加载时的路由校正 #

在根配置初始化阶段，处理已认证用户访问登录页的情况：

// 初始化时校验：已认证但在登录页则跳转仪表盘
if (isAuthenticated && location.pathname === '/') {
  location.href = '/dashboard';
}

通过以上步骤即可实现：

• 未认证用户访问受保护微前端时，自动跳转登录页且不加载目标应用
• 登录成功后自动更新状态并激活对应微前端
• 已认证用户访问登录页时自动跳转至目标页面

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