Angular中如何区分页面刷新事件与浏览器/标签页关闭事件并实现差异化处理？

这确实是个头疼的问题——beforeunload事件本身没法直接区分"刷新"和"关闭"操作，因为这两种行为都会触发它。不过我们可以通过一些间接手段来实现你的需求，下面分享两种可行的方案：

方案一：利用导航类型判断（现代浏览器适用） #

现代浏览器的performance API可以帮我们识别页面的导航类型。我们可以在组件初始化时先记录当前页面是如何加载的，然后在beforeunload事件里结合这个记录来判断操作类型。

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  private isPageRefresh = false;

  ngOnInit(): void {
    // 获取当前页面的导航类型
    const navigationEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    // navigation.type为'reload'表示是刷新操作
    this.isPageRefresh = navigationEntry.type === 'reload';
  }

  @HostListener('window:beforeunload', ['$event'])
  public beforeunloadHandler(event: Event) {
    // 如果不是刷新操作，就执行清除token的请求
    if (!this.isPageRefresh) {
      // 注意：这里要用sendBeacon发送请求，因为普通XMLHttpRequest/fetch可能被浏览器取消
      navigator.sendBeacon('/api/clear-token', JSON.stringify({ token: 'your-token' }));
    }
  }
}

注意：PerformanceNavigationTiming API在一些旧浏览器（比如IE）不支持，如果你的项目需要兼容旧环境，建议用方案二。

方案二：SessionStorage + 定时器方案（兼容性更好） #

这个方案的核心逻辑是：刷新页面时，页面会在触发beforeunload后马上重新加载，我们可以利用这个时间差来区分。具体步骤是：

1. 在页面初始化时，清除之前设置的定时器标记
2. 在beforeunload事件里设置一个定时器，延迟执行清除token的请求
3. 如果是刷新操作，页面重新加载时会触发初始化逻辑，清除定时器，请求就不会发送；如果是关闭标签页，定时器会正常执行

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  private clearTokenTimer: number | null = null;

  ngOnInit(): void {
    // 页面加载时，清除之前的定时器标记
    const timerId = sessionStorage.getItem('clearTokenTimerId');
    if (timerId) {
      window.clearTimeout(parseInt(timerId));
      sessionStorage.removeItem('clearTokenTimerId');
    }
  }

  @HostListener('window:beforeunload', ['$event'])
  public beforeunloadHandler(event: Event) {
    // 设置一个100ms的定时器，执行清除token的请求
    this.clearTokenTimer = window.setTimeout(() => {
      navigator.sendBeacon('/api/clear-token', JSON.stringify({ token: 'your-token' }));
    }, 100);
    // 把定时器ID存在sessionStorage里，方便页面刷新时清除
    sessionStorage.setItem('clearTokenTimerId', this.clearTokenTimer.toString());
  }
}

关键提醒：一定要用navigator.sendBeacon()来发送请求，而不是普通的fetch或XMLHttpRequest。因为当页面卸载时，浏览器会优先终止异步请求，而sendBeacon会保证请求在后台异步发送，不会阻塞页面卸载。

补充说明 #

这两种方案都不能做到100%精准（比如极端情况下浏览器崩溃可能不会触发事件），但在绝大多数正常场景下都能满足需求。你可以根据项目的浏览器兼容性要求选择合适的方案。

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