Angular 4：如何区分浏览器/标签关闭与页面刷新事件并触发注销

我完全懂你现在的困扰——window:unload和window:beforeunload在页面刷新、标签关闭时都会触发，想要只在关闭时执行注销逻辑确实有点头疼。不过咱们可以通过几个实用的技巧来实现这个需求，下面给你详细说明：

方案一：通过鼠标位置判断用户操作行为 #

这个思路是基于用户的操作习惯：通常刷新页面时，鼠标会停留在页面内部（比如点击刷新按钮、按F5）；而关闭标签/浏览器时，鼠标大概率会移动到页面外部（比如浏览器标签栏、窗口关闭按钮）。我们可以通过监听鼠标的位置来区分这两种场景：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private isMouseInPage = true;

  // 监听鼠标在页面内移动
  @HostListener('window:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    this.isMouseInPage = true;
  }

  // 监听鼠标离开页面区域
  @HostListener('window:mouseout', ['$event'])
  onMouseOut(event: MouseEvent) {
    // 判断鼠标是否离开页面可视区域
    const isLeavingPage = event.clientY <= 0 || 
                          event.clientX <= 0 || 
                          event.clientX >= window.innerWidth || 
                          event.clientY >= window.innerHeight;
    if (isLeavingPage) {
      this.isMouseInPage = false;
    }
  }

  // 监听页面卸载前事件
  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event: BeforeUnloadEvent) {
    // 只有当鼠标在页面外时，才执行注销逻辑
    if (!this.isMouseInPage) {
      this.performLogout();
    }
  }

  private performLogout() {
    // 推荐用navigator.sendBeacon发送注销请求，避免浏览器取消异步请求
    navigator.sendBeacon('/api/user/logout', JSON.stringify({ userId: 'your-user-id' }));
  }
}

注意：这个方法不是100%精准（比如用户可能在页面内按Ctrl+W关闭标签），但在绝大多数常规场景下都能生效。

方案二：利用SessionStorage标记页面加载状态 #

这个方案的核心是通过SessionStorage的生命周期来判断：SessionStorage是标签页级别的存储，页面刷新时会先卸载再重新加载，而关闭标签时存储会被清除。我们可以通过标记来区分两种场景：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    // 页面初始化时，标记当前页面处于刷新/加载状态
    sessionStorage.setItem('isPageRefreshing', 'true');
    
    // 确保页面完全加载后也设置标记
    window.addEventListener('load', () => {
      sessionStorage.setItem('isPageRefreshing', 'true');
    });
  }

  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event: BeforeUnloadEvent) {
    const isRefreshing = sessionStorage.getItem('isPageRefreshing') === 'true';
    
    // 如果没有刷新标记，说明是关闭标签/浏览器
    if (!isRefreshing) {
      this.performLogout();
    }
    
    // 移除标记，因为刷新时会在新页面重新设置
    sessionStorage.removeItem('isPageRefreshing');
  }

  private performLogout() {
    navigator.sendBeacon('/api/user/logout', JSON.stringify({ userId: 'your-user-id' }));
  }
}

原理说明：

• 当页面刷新时，beforeunload触发后页面会重新加载，ngOnInit会再次设置isPageRefreshing标记；
• 当关闭标签时，beforeunload触发后页面不会再加载，标记不会被重置，因此我们可以判断这是关闭操作。

关键注意点 #

无论用哪种方案，都要避免在unload或beforeunload中使用普通的异步AJAX请求——因为浏览器会在页面卸载时终止未完成的异步任务，导致请求失败。推荐使用navigator.sendBeacon()，它会在后台异步发送请求，不会阻塞页面卸载，能保证请求大概率被服务器接收。

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