微前端架构下点击Home超链接时CanDeactivate Guard未触发的问题

Angular内置的CanDeactivate Guard仅对当前应用路由配置内的导航生效，跳转到其他微前端应用的操作属于跨应用导航，不会触发内置守卫。以下是几种可行的解决方案：

• 拦截浏览器全局导航事件
  利用浏览器的window:beforeunload事件处理跨应用跳转或页面刷新场景，复用CanDeactivate Guard的校验逻辑：

  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: BeforeUnloadEvent) {
    // 调用你的校验逻辑，比如判断表单是否未保存
    if (this.hasUnsavedChanges()) {
      event.returnValue = '你确定要离开当前页面吗？';
      return event.returnValue;
    }
    return null;
  }
  

  注意：该事件的弹窗内容受浏览器限制，无法完全自定义，不同浏览器表现略有差异。

• 基于微前端框架的全局导航拦截
  如果使用Single SPA、Module Federation等微前端框架，可利用框架提供的全局导航钩子拦截跨应用跳转：
  以Single SPA为例，在子应用挂载阶段添加事件监听：

  singleSpa.addEventListener('single-spa:before-routing-event', (event) => {
    const targetUrl = event.detail.newUrl;
    // 判断目标路由是否为Home页面所在的微前端
    if (targetUrl.includes('/home') && this.hasUnsavedChanges()) {
      if (!confirm('你确定要离开当前页面吗？')) {
        event.preventDefault();
      }
    }
  });
  

• 封装自定义外部链接指令
  给所有跳转到外部微前端的链接添加自定义指令，在指令中触发CanDeactivate Guard的校验逻辑，确认通过后再执行跳转：

  @Directive({
    selector: '[appExternalMicroFrontendLink]'
  })
  export class ExternalMicroFrontendLinkDirective {
    constructor(
      private el: ElementRef<HTMLAnchorElement>,
      private customGuardService: CustomGuardService // 抽离的共享校验服务
    ) {}
  
    @HostListener('click', ['$event'])
    onClick(event: MouseEvent) {
      event.preventDefault();
      const targetUrl = this.el.nativeElement.href;
      // 调用校验逻辑
      this.customGuardService.checkCanDeactivate().then(canLeave => {
        if (canLeave) {
          window.location.href = targetUrl;
        }
      });
    }
  }
  

  使用方式：<a appExternalMicroFrontendLink href="/home">Home</a>

• 抽离共享校验逻辑
  将CanDeactivate Guard中的核心校验代码抽成独立服务，不管是内置路由导航还是跨应用跳转，都复用同一套规则，避免代码冗余。

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