NgOnDestroy同时关闭多浏览器标签时失效问题排查

AI 小北

2026-8-4

问题描述

以下代码在用户关闭1-2个浏览器标签时能正常执行，但同时关闭5个及以上标签时完全失效：

@HostListener('window:beforeunload')
async ngOnDestroy() {
  if (this.myValueSub) {
      this.myValueSub.unsubscribe();
  }

  await this.authService.logout();
}

问题根源

浏览器卸载时的异步任务限制：浏览器在处理页面卸载时会优先快速释放资源，当多个标签同时触发beforeunload事件时，浏览器可能直接终止未完成的异步请求，不会等待await this.authService.logout()执行完毕。
并发请求冲突：多标签同时关闭会触发多次logout请求，后端可能因会话状态已被前序请求销毁、并发处理压力过大等原因，导致后续请求处理失败。
Angular生命周期执行中断：页面被强制关闭时，Angular的ngOnDestroy钩子可能无法完整执行，多标签同时关闭会加剧这个问题，直接中断异步逻辑。

可行的解决方案

改用Beacon API发送logout请求：Beacon是浏览器专为卸载场景设计的API，它会异步发送请求且保证浏览器不会中断该过程，无需等待响应：

// 修改authService的logout方法
logout() {
  const logoutUrl = '/api/logout';
  navigator.sendBeacon(logoutUrl, JSON.stringify({}));
}

// 修改ngOnDestroy
@HostListener('window:beforeunload')
ngOnDestroy() {
  if (this.myValueSub) {
      this.myValueSub.unsubscribe();
  }
  this.authService.logout();
}

添加并发请求拦截标识：通过本地存储标记是否已触发logout，避免多标签重复请求：

@HostListener('window:beforeunload')
async ngOnDestroy() {
  if (this.myValueSub) {
      this.myValueSub.unsubscribe();
  }
  if (!localStorage.getItem('isLoggingOut')) {
    localStorage.setItem('isLoggingOut', 'true');
    await this.authService.logout();
    localStorage.removeItem('isLoggingOut');
  }
}