Angular项目Chrome浏览器下首次点击返回按钮事件无法捕获问题求解

问题根因 #

现有代码失效的核心原因有两个：

• 页面刚加载完成时，调用的history.pushState({}, '')还未完成当前会话历史栈的初始化绑定，无用户交互的场景下浏览器会跳过部分历史变更事件的派发
• Angular的Location服务的subscribe默认只监听Angular路由体系内触发的历史变更，原生浏览器返回触发的变更在无交互场景下会漏触发

修复方案 #

调整历史栈初始化逻辑，同时监听原生popstate事件 #

在组件初始化（ngOnInit）阶段执行以下逻辑即可覆盖全场景：

import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements OnInit, OnDestroy {
  private popstateListener: EventListenerOrEventListenerObject;

  constructor(private location: Location) {}

  ngOnInit(): void {
    // 先给当前历史栈打标记，保证至少有一条可回退的历史记录
    history.pushState({ page: 'current' }, document.title);

    // 监听原生popstate事件，覆盖无交互的首屏场景
    this.popstateListener = (event) => {
      // 你的登出逻辑写在这里
      // 如果需要阻止默认回退行为，可添加 event.preventDefault()
      // 执行完自定义逻辑后如果需要正常回退，主动调用history.back()或者对应路由跳转即可
    };
    window.addEventListener('popstate', this.popstateListener);

    // 保留原有的Location监听，覆盖Angular路由内跳转的场景
    this.location.subscribe(() => {
      // 你的登出逻辑写在这里
    });
  }

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

路由守卫场景兼容 #

如果是全局路由场景需要监听返回，可以把上述逻辑放到根组件或者路由守卫中，保证页面加载完成第一时间就完成监听绑定。

注意事项 #

• 不要重复调用history.pushState，避免历史栈出现多余的空记录，导致用户需要多次点击返回才能退出页面
• 如果登出逻辑需要跳转页面，执行完逻辑后记得清空当前的历史栈标记，避免循环触发监听事件

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