如何基于Single SPA Layout Engine实现单点登录与前置验证？

完全可以通过Single SPA Layout Engine实现这种登录优先的认证逻辑，下面是具体实现思路和最佳实践：

核心思路 #

利用Single SPA Layout Engine的条件渲染和路由守卫能力，结合全局认证状态，控制导航栏、主应用区域的显示时机——未登录时只展示登录页面，登录成功后再渲染受保护的布局和应用。

具体实现步骤 #

1. 改造路由布局结构 #

调整原有的路由配置，给受保护的布局（导航栏、主内容区）添加渲染条件，同时配置路由重定向规则：

<single-spa-router>
  <!-- 登录路由：始终可访问，未登录时默认跳转至此 -->
  <route path="login">
    <application name="@login"></application>
  </route>

  <!-- 已登录状态下才渲染的受保护区域 -->
  <route path="*" when="isAuthenticated">
    <nav>
      <application name="@angular-navbar"></application>
    </nav>
    <main>
      <route path="App1">
        <application name="@angular-app"></application>
      </route>
      <route path="react">
        <application name="@react-app/react-app"></application>
      </route>
      <!-- 已登录后访问根路径，自动跳转到默认应用 -->
      <route path="" redirectTo="App1"></route>
    </main>
  </route>

  <!-- 未登录时，访问任何非login路径都重定向到登录页 -->
  <route path="*" when="!isAuthenticated" redirectTo="login"></route>
</single-spa-router>

2. 全局认证状态管理 #

在根配置（root config）中统一管理认证状态，同时让登录应用在成功后更新该状态：

• 登录应用登录成功后，持久化认证状态并跳转至主应用：

  // @login应用的登录成功回调
  function handleLoginSuccess() {
    // 用sessionStorage存储状态，页面刷新后仍保持登录
    sessionStorage.setItem('isAuthenticated', 'true');
    // 跳转到主应用路由
    window.singleSpaNavigate('/App1');
  }
  

3. 实现路由守卫函数 #

在根配置中注册isAuthenticated函数，供Layout Engine的when属性调用，统一判断认证状态：

// root-config.js
singleSpaLayout.registerApplication({
  name: 'root-layout',
  app: () => import('./root-layout.html'),
  activeWhen: ['/'],
  customProps: {
    // 定义全局守卫函数
    isAuthenticated: () => {
      return sessionStorage.getItem('isAuthenticated') === 'true';
    }
  }
});

最佳实践 #

• 状态持久化策略：用sessionStorage存储认证状态，确保页面刷新后不丢失；若需“记住我”功能，可改用localStorage并添加过期时间校验。
• 路由拦截规则：未登录时拦截所有受保护路由，强制跳转登录页；已登录时访问登录页，自动重定向到默认主应用。
• 登录应用独立性：登录应用需做到无依赖、轻量，确保未登录状态下能快速加载，避免影响用户体验。
• 全局状态同步：若子应用需要感知登录状态变化，可通过Single SPA的customEvent发送状态变更通知，或使用共享状态库统一管理。
• 退出登录处理：在导航栏的退出按钮逻辑中，清除认证状态、销毁子应用的用户相关数据，并重定向到登录页。

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