Angular 8实现canDeactivate守卫时路由历史损坏问题求解

• Angular 8版本路由模块存在已知缺陷：当canDeactivate守卫返回false拦截导航时，框架内部已经提前执行了历史栈写入操作，没有在导航取消时做回滚，直接导致路由历史记录和框架内部维护的路由状态不一致，最终出现历史错乱、跳转异常的问题，这个缺陷官方在Angular 12版本才正式修复。
• 你当前的实现还有两个额外问题：
  • 将路由守卫的canDeactivate方法直接绑定到window:beforeunload事件上，两者的返回值规范不兼容，会导致页面刷新、关闭时的提示逻辑异常。
  • 守卫中直接返回原生confirm的同步结果虽然可以运行，但没有处理异步拦截场景的兼容，扩展性差。

1. 修正守卫实现，增加历史状态手动回滚逻辑 #

核心思路是记录每一次成功导航的路由地址，当守卫拦截导航、用户选择留在当前页时，手动用正确的地址替换掉被框架错误写入的历史记录，修复状态不一致问题。
修正后的守卫代码：

import { CanDeactivate, NavigationEnd, Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { Location } from '@angular/common';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  private lastValidUrl: string;

  constructor(
    private location: Location,
    private router: Router
  ) {
    // 初始化记录当前路由
    this.lastValidUrl = this.router.url;
    // 每次导航完成后更新有效路由地址
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.lastValidUrl = event.urlAfterRedirects;
    });
  }

  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    const canLeave = component.canDeactivate();

    // 处理同步返回结果
    if (typeof canLeave === 'boolean') {
      if (canLeave) return true;
      const confirmResult = confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
      if (!confirmResult) {
        // 延迟执行替换，等框架错误写入历史后再覆盖，用户无感知
        setTimeout(() => {
          this.location.replaceState(this.lastValidUrl);
        }, 0);
        return false;
      }
      return true;
    }

    // 处理异步返回结果
    return canLeave.pipe(
      map(allow => {
        if (allow) return true;
        const confirmResult = confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
        if (!confirmResult) {
          setTimeout(() => {
            this.location.replaceState(this.lastValidUrl);
          }, 0);
          return false;
        }
        return true;
      })
    );
  }
}

2. 拆分组件内的beforeunload逻辑和守卫逻辑 #

不要复用同一个方法处理路由守卫和页面卸载事件，两者的事件规范不同，分开实现：

import { HostListener } from '@angular/core';

// 路由守卫专用方法，移除@HostListener装饰器
canDeactivate(): Observable<boolean> | boolean {
  return !this.isDataUpdated();
}

// 单独处理页面刷新、关闭时的未保存变更提示
@HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event: BeforeUnloadEvent) {
  if (this.isDataUpdated()) {
    event.preventDefault();
    event.returnValue = 'Your unsaved changes will be lost if you leave this page.';
    return event.returnValue;
  }
  return true;
}

3. 配置校验 #

• 确保PendingChangesGuard已经在所属模块的providers数组中注册，否则守卫不会生效。
• 如果后续替换原生confirm为自定义异步弹窗，只需要在拿到用户“留在当前页”的选择结果后，执行相同的location.replaceState逻辑即可。
• 代码中setTimeout的0延迟是为了避开Angular内部的事件执行顺序，确保历史替换操作在框架错误写入完成后执行，不会被框架逻辑覆盖。

内容的提问来源于stack exchange，提问作者The Hungry Dictator