Angular浏览器返回按钮导航拦截问题：对话框弹出前已跳转

问题描述 #

我使用Angular Router处理浏览器导航时遇到一个问题：点击浏览器返回按钮后，自定义确认对话框还未打开，页面就已经发生了导航跳转。需要实现点击返回按钮后先停留在当前页面，弹出确认对话框后再决定是否执行跳转。

现有代码 #

导航服务 #

import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Location } from '@angular/common';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  private internalNavigation = false;
  //private previousUrl: string | null = null;

  private navigationEventSource = new Subject<string>();
  navigationEvent$ = this.navigationEventSource.asObservable();

  constructor(private router: Router, private location: Location) {
    console.log("Navigation service called>>>");
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        //const currentUrl = event.url;
        if (event.navigationTrigger === 'popstate') {
          console.log("Navigation service called with pop state>>>");
          if (this.internalNavigation) {
            this.navigationEventSource.next('internal');
            this.internalNavigation = false;
          } else {
            this.navigationEventSource.next('browser');
            // Push dummy state to history to prevent actual back navigation
            //history.pushState(null, '');
          }
        } else {
          this.navigationEventSource.next('internal');
        }
        //this.previousUrl = currentUrl;
      }
    });
    // Push initial dummy state to history
    //history.pushState(null, '');
  }

  goBack(): void {
    this.internalNavigation = true;
    this.location.back();
  }
}

app.component.ts #

ngOnInit() {
    // Prevent browser back button navigation
    history.pushState(null, '');
    this.navigationSubscription = this.navigationService.navigationEvent$.pipe(
      takeUntil(this.unsubscriber)
    ).subscribe(event => {
      if (event === 'internal') {
        // Handle internal navigation logic here
      } else if (event === 'browser') {
        this.userSubscription = this.userProviderService.getUserDetails()
        .pipe(takeUntil(this.destroy$))
        .subscribe((userDetails: UserSessionObject | null) => {
          if (userDetails && userDetails.user) {
              this.sessionLogout("BackButtonTap"); 
            if (!this.isDialogOpen) {
              this.openBackButtonDialog();
            }
          } 
        });
      }
    });
  }

自定义对话框 #

openBackButtonDialog = () => {
    this.isDialogOpen = true;
    this.backRef = this.dialogService.open(this.backButtonDialogTemplate, {
      context: '',
      hasBackdrop: true,
      closeOnBackdropClick: false,
      closeOnEsc: false
    });
    this.backRef.onClose.subscribe((result) => {
      //handling the confirm dialog opening immedialtely after close
      this.isDialogOpen = true;
      setTimeout(() => {
        this.isDialogOpen = false;
      }, 500);

      if(result) {
        history.pushState(null, '');
        this.sessionLogout("BackButtonTap"); //logged out the session
      } else {
        history.forward(); //stay on the same page
      }
    });
   
  }

解决方案 #

问题根源 #

浏览器popstate事件触发时，页面已开始执行导航跳转，而现有代码依赖Router的NavigationStart事件处理，此时导航已启动无法阻止。同时直接操作history的方式会导致历史记录栈混乱，无法稳定拦截跳转。

修正步骤 #

1. 重构NavigationService，直接拦截popstate事件

import { Injectable, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavigationService implements OnDestroy {
  private internalNavigation = false;
  private popStateListener: (event: PopStateEvent) => void;

  private browserBackSource = new Subject<void>();
  browserBackEvent$ = this.browserBackSource.asObservable();

  constructor(private location: Location) {
    // 直接监听window的popstate事件，拦截浏览器返回
    this.popStateListener = (event: PopStateEvent) => {
      if (!this.internalNavigation) {
        // 阻止默认返回行为，停留在当前页
        event.preventDefault();
        // 通知组件弹出确认对话框
        this.browserBackSource.next();
        // 恢复历史记录栈，避免后续导航异常
        history.pushState(null, '', window.location.href);
      } else {
        // 内部触发的返回，重置标记
        this.internalNavigation = false;
      }
    };
    window.addEventListener('popstate', this.popStateListener);

    // 初始化时添加一条空历史记录，避免首次点击直接退出应用
    history.pushState(null, '', window.location.href);
  }

  // 内部调用的返回方法，不会被拦截
  goBack(): void {
    this.internalNavigation = true;
    history.back();
  }

  // 组件销毁时移除监听，避免内存泄漏
  ngOnDestroy(): void {
    window.removeEventListener('popstate', this.popStateListener);
  }
}

2. 调整app.component.ts的订阅逻辑

移除冗余的history.pushState，仅在浏览器返回时弹出对话框，且不要提前执行登出：

ngOnInit() {
    this.navigationSubscription = this.navigationService.browserBackEvent$.pipe(
      takeUntil(this.unsubscriber)
    ).subscribe(() => {
      this.userProviderService.getUserDetails()
        .pipe(takeUntil(this.destroy$))
        .subscribe((userDetails: UserSessionObject | null) => {
          if (userDetails?.user && !this.isDialogOpen) {
            this.openBackButtonDialog();
          }
        });
    });
  }

3. 优化对话框逻辑

用户确认后再执行登出和返回，取消则无需额外操作：

openBackButtonDialog = () => {
    this.isDialogOpen = true;
    this.backRef = this.dialogService.open(this.backButtonDialogTemplate, {
      context: '',
      hasBackdrop: true,
      closeOnBackdropClick: false,
      closeOnEsc: false
    });

    this.backRef.onClose.subscribe((result) => {
      this.isDialogOpen = false;

      if (result) {
        // 用户确认退出，执行登出后返回上一页
        this.sessionLogout("BackButtonTap");
        this.navigationService.goBack();
      }
      // 取消操作时，页面已停留在当前页，无需处理
    });
  }

核心要点 #

• 直接监听window.popstate并调用event.preventDefault()，能在导航启动前阻止页面跳转。
• 拦截后通过history.pushState恢复历史记录栈，避免后续导航出现异常。
• 区分内部导航（如主动调用goBack()）和浏览器触发的返回，确保正常导航不受影响。

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