single-spa-angular中微前端间跳转拦截及canDeactivate失效问题咨询

1. 为什么Angular的canDeactivate守卫仅在同一微前端内生效？ #

Angular的canDeactivate守卫是自身路由系统的专属机制，它只负责监听和管控当前Angular应用内部的路由状态变更。在single-spa架构中，每个子应用（如microapp1、microapp2）都是独立的运行实例，拥有各自独立的路由栈。跨微前端的跳转本质是由single-spa触发的应用卸载-挂载切换流程，不属于当前子应用Angular路由的变化范畴，因此canDeactivate守卫无法感知到这类跨应用的跳转行为，也就无法生效。

2. single-spa中如何实现跨微前端跳转的拦截？ #

可以通过以下几种方式实现类似守卫的拦截效果：

方案一：子应用内直接拦截跳转触发逻辑 #

如果跨应用跳转是由子应用内的交互（如按钮点击）触发的，直接在触发逻辑中先校验表单状态：

// microapp1表单组件内的跳转处理
onJumpToMicroapp2() {
  // 检查表单是否有未保存修改
  if (this.form.dirty) {
    if (!confirm('表单存在未保存修改，确定要离开吗？')) {
      // 用户取消，终止跳转
      return;
    }
  }
  // 确认后执行跨应用跳转
  window.location.href = '/microapp2/home';
  // 也可使用single-spa官方API：singleSpa.navigateToUrl('/microapp2/home');
}

方案二：全局路由监听拦截 #

在single-spa的根配置中监听全局路由变化，在应用切换前做校验：

// root-config.js
// 监听hash和history模式的路由变化
window.addEventListener('hashchange', handleCrossAppRouteChange);
window.addEventListener('popstate', handleCrossAppRouteChange);

function handleCrossAppRouteChange(event) {
  const currentMountedApp = singleSpa.getMountedApps()[0];
  const targetPath = window.location.hash.slice(1) || window.location.pathname;

  // 判断是否是从microapp1/form跳转到microapp2/home的场景
  if (currentMountedApp === 'microapp1' && targetPath.startsWith('/microapp2/home')) {
    // 调用microapp1暴露的方法检查表单状态
    const microapp1 = window.microapp1;
    if (microapp1 && microapp1.isFormDirty()) {
      if (!confirm('表单存在未保存修改，确定要离开吗？')) {
        // 阻止路由变更并恢复原路径
        event.preventDefault();
        window.history.pushState(null, '', window.location.pathname + window.location.hash);
      }
    }
  }
}

同时需要在microapp1中暴露表单状态检查方法：

// microapp1的main.ts
// 假设通过共享服务维护表单状态
import { FormService } from './services/form.service';

// 暴露给全局的检查方法
export function isFormDirty() {
  return inject(FormService).hasUnsavedChanges;
}

// 将方法挂载到window（或通过single-spa的exposeGlobalVariables配置）
window.microapp1 = { isFormDirty };

方案三：利用应用切换钩子拦截 #

在注册microapp2时，通过自定义属性注入校验逻辑，在挂载前检查状态：

// root-config.js
singleSpa.registerApplication({
  name: 'microapp2',
  app: () => System.import('microapp2'),
  activeWhen: location => location.pathname.startsWith('/microapp2'),
  customProps: {
    // 注入校验函数
    canActivate: () => {
      const currentApp = singleSpa.getMountedApps()[0];
      if (currentApp === 'microapp1') {
        const microapp1 = window.microapp1;
        if (microapp1 && microapp1.isFormDirty()) {
          return confirm('表单存在未保存修改，确定要离开吗？');
        }
      }
      return true;
    }
  }
});

然后在microapp2的mount钩子中执行校验：

// microapp2的main.ts
export async function mount(props) {
  // 先执行校验，不通过则终止挂载
  if (!props.canActivate()) {
    throw new Error('用户取消跨应用跳转');
  }
  // 正常执行挂载逻辑
  return platformBrowserDynamic().bootstrapModule(AppModule);
}

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