Angular中实现仅页面/标签页关闭触发、刷新不触发的事件监听

beforeunload是页面卸载前的统一触发事件，浏览器不会在事件对象中告知卸载触发原因（刷新/关闭标签/跳转外站），因此无法直接在该事件同步回调中区分刷新和关闭操作。

核心利用浏览器的页面调度逻辑差异：

• 触发页面刷新时，浏览器会立刻销毁旧页面的JS运行上下文，优先加载新页面资源，旧上下文中未执行的短延迟宏任务会被直接丢弃
• 触发标签/浏览器关闭时，浏览器会等待事件循环中已排队的短耗时任务执行完成后，再销毁页面上下文

代码修改 #

你只需要把原来的同步清除逻辑，放到10ms延迟的setTimeout中即可，不需要引入额外存储逻辑：

@HostListener('window:beforeunload', ['$event'])
checkIsUserLogOut() {
    if (ConfigurationModel.applicationOptions.autoLogOutWhenWebBrowserClosed) {
        // 延迟10ms执行，刷新场景下该任务会被浏览器直接丢弃不会执行
        setTimeout(() => {
            localStorage.removeItem('auth_token');
            localStorage.removeItem('auth_token_expires_on');
        }, 10);
    }
}

方案说明 #

• 刷新场景：旧页面上下文被立刻回收，setTimeout中清除凭证的逻辑不会执行，登录态会保留
• 关闭标签/浏览器场景：延迟任务会在页面销毁前执行，正常清除登录凭证
• 跳转外站链接场景：延迟任务也会执行，符合离开应用即登出的逻辑，无副作用

注意事项 #

• 延迟时间不要超过50ms，否则部分浏览器会在关闭时直接丢弃长延迟任务，导致登出逻辑不触发
• 不要在延迟任务中执行网络请求等长耗时操作，浏览器不会等待这类任务执行完成
• 该方案兼容Chrome、Edge、Firefox等主流Chromium、Gecko内核浏览器，Safari下建议将延迟调整为0ms保证执行

如果你的应用需要支持多标签同时打开、要求100%覆盖浏览器强退、进程被杀等极端场景，可以结合sessionStorage的生命周期特性实现：
核心特性：sessionStorage为单标签页隔离存储，同标签页刷新时数据不丢失，标签/浏览器关闭后对应存储会被永久销毁。

实现代码 #

首先在应用初始化逻辑（APP_INITIALIZER）中添加标记，再配合页面卸载逻辑判断：

// app.module.ts
import { NgModule, APP_INITIALIZER, HostListener } from '@angular/core';

export function initApp() {
  return () => {
    // 同标签刷新时sessionStorage不丢失，该标记存在说明是刷新操作
    if (sessionStorage.getItem('app_loaded')) {
      return;
    }
    // 新标签/浏览器重启后打开场景，写入标记
    sessionStorage.setItem('app_loaded', '1');
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true
    }
  ]
})
export class AppModule {
  @HostListener('window:beforeunload', ['$event'])
  handleUnload() {
    if (!ConfigurationModel.applicationOptions.autoLogOutWhenWebBrowserClosed) {
      return;
    }
    setTimeout(() => {
      // 二次校验：刷新场景下标记保留，标签关闭后sessionStorage被销毁读不到标记
      if (!sessionStorage.getItem('app_loaded')) {
        localStorage.removeItem('auth_token');
        localStorage.removeItem('auth_token_expires_on');
      }
    }, 10);
  }
}

方案说明 #

• 刷新场景：同标签的sessionStorage不会被销毁，延迟任务执行时能读到app_loaded标记，不会清除凭证
• 关闭场景：标签销毁后sessionStorage被清空，延迟任务读不到标记，正常执行登出逻辑
• 浏览器强退/进程被杀场景：下次打开应用时sessionStorage无app_loaded标记，可直接在初始化逻辑中补充校验清除过期凭证

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