微前端架构下Angular canDeactivate守卫跨应用路由不触发问题求助

我有一个采用微前端架构的应用，在其中一个Angular微前端里使用了canDeactivate守卫，示例代码如下：

const exampleRoutes: Routes = [
    {
        path: Config.Route.root.path,
        component: ExampleMainComponent,
    },
    {
        path: Config.Route.formExample.path,
        component: ExampleFormComponent,
        canDeactivate: [MyGuardService],
    },
];

@NgModule({
    imports: [RouterModule.forChild(exampleRoutes)],
    exports: [RouterModule],
    declarations: [],
    providers: [],
})

这个守卫在同一微前端内导航时能正常触发，但跳转到其他微前端的路由时完全没反应，请问有没有办法实现跨微前端触发该守卫？

当然可以实现，核心是让主应用或微前端框架感知跨微前端的路由跳转事件，通知当前活跃的Angular微前端执行canDeactivate守卫逻辑。以下是几种可行方案：

1. 主应用统一路由拦截方案 #

在主应用层拦截所有路由跳转动作，检测到跨微前端跳转时，主动调用Angular微前端暴露的守卫逻辑：

• Angular微前端侧：把MyGuardService的核心逻辑封装成可全局调用的方法，通过window挂载暴露：

  // Angular微前端的启动文件（如main.ts）
  export function bootstrap(props: any) {
    // ... 原有启动逻辑
    // 封装守卫检查方法
    window['checkExampleFormDeactivate'] = async () => {
      const guard = inject(MyGuardService);
      // 获取当前激活的ExampleFormComponent实例
      const activeRoute = inject(Router).routerState.root.firstChild;
      const targetComponent = activeRoute?.componentInstance;
      if (targetComponent instanceof ExampleFormComponent) {
        const result = await guard.canDeactivate(targetComponent);
        return Promise.resolve(result);
      }
      return Promise.resolve(true);
    };
  }
  

• 主应用侧：拦截history跳转或框架路由钩子，触发守卫检查：

  // 主应用路由拦截逻辑
  const originalPushState = history.pushState;
  history.pushState = async function(...args) {
    const targetPath = args[2];
    // 判断目标路由是否属于其他微前端
    if (targetPath.includes('其他微前端路由标识') && window.checkExampleFormDeactivate) {
      const canDeactivate = await window.checkExampleFormDeactivate();
      if (!canDeactivate) return; // 阻止跳转
    }
    return originalPushState.apply(this, args);
  };
  

2. 基于微前端框架的方案（以qiankun为例） #

利用qiankun的全局状态管理和生命周期钩子实现通信：

• Angular微前端侧：在mount生命周期中监听全局状态变化，触发守卫检查：

  export function mount(props: any) {
    // ... 原有挂载逻辑
    // 监听主应用的检查指令
    props.onGlobalStateChange(async (state) => {
      if (state.triggerDeactivateCheck) {
        const guard = inject(MyGuardService);
        const activeRoute = inject(Router).routerState.root.firstChild;
        const targetComponent = activeRoute?.componentInstance;
        let canDeactivate = true;
        if (targetComponent instanceof ExampleFormComponent) {
          canDeactivate = await guard.canDeactivate(targetComponent);
        }
        // 向主应用返回检查结果
        props.setGlobalState({ canDeactivateResult: canDeactivate });
      }
    });
  }
  

• 主应用侧：切换微前端前触发检查，根据结果决定是否跳转：

  // 主应用切换微前端逻辑
  async function switchToMicroApp(appName) {
    // 触发Angular微前端的守卫检查
    await setGlobalState({ triggerDeactivateCheck: true });
    const globalState = await getGlobalState();
    if (!globalState.canDeactivateResult) return; // 阻止切换
    // 执行微前端切换操作
    startMicroApps([/* 目标微应用配置 */]);
  }
  

3. Angular微前端内部监听方案 #

在Angular微前端内监听浏览器路由变化事件，拦截跨微前端跳转：

@Injectable({ providedIn: 'root' })
export class CrossMicroAppGuardHandler {
  constructor(
    private router: Router,
    private myGuard: MyGuardService
  ) {
    // 监听浏览器前进后退事件
    window.addEventListener('popstate', async (e) => {
      await this.checkDeactivate(e);
    });
    // 拦截主应用可能触发的跳转（比如通过自定义事件）
    window.addEventListener('microAppSwitch', async (e) => {
      const canDeactivate = await this.checkDeactivate();
      if (!canDeactivate) e.preventDefault();
    });
  }

  private async checkDeactivate(event?: PopStateEvent): Promise<boolean> {
    const activeRoute = this.router.routerState.root.firstChild;
    const targetComponent = activeRoute?.componentInstance;
    if (targetComponent instanceof ExampleFormComponent) {
      const canDeactivate = await this.myGuard.canDeactivate(targetComponent);
      if (!canDeactivate && event) {
        // 恢复原路由状态，阻止跳转
        history.pushState(null, '', this.router.url);
      }
      return canDeactivate;
    }
    return true;
  }
}

关键注意点 #

• 要确保能正确获取当前激活的ExampleFormComponent实例，可通过Angular的ActivatedRoute或RouterState实现。
• 若守卫返回Observable<boolean>，需转换为Promise等待异步结果。
• 不同微前端框架的API存在差异，需根据实际使用框架调整代码逻辑。

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