Angular实现监听关闭浏览器，同时做进一步操作

需求：关闭浏览器同时实现退出登录，刷新页面不退出登录

背景：退出登录需要发送请求到后端，后端进行用户信息判断才可退出登录

由于Angular单页面的特性，所以拥有一系列的难点，例如使用：

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

  @HostListener('window:beforeunload', ['$event'])
  onWindowClose(event: any): void {
   // Do something
    event.preventDefault();
    event.returnValue = false;
 }

代码实现阻止浏览器关闭前的一个提醒操作，有个缺点就是刷新的同时也会触发，不符合需求。

于是网上查找一番，发现可通过以下方式实现需求：

  export class AppComponent {

      beginTime = 0;//Start time of executing onbeforeunload
      differTime = 0;//时间差

      @HostListener('window:beforeunload', ['$event'])
      onBeforeWindowClose(event: any): void
      {
        this.beginTime = new Date().getTime();
      }

      @HostListener('window:unload', ['$event'])
      onWindowClose(event: any): void
      {
        this.differTime = new Date().getTime() - this.beginTime;
        if(this.differTime <= 5) {
         console.log("浏览器关闭") 

        }else{
            console.log("浏览器刷新") ；
        }
      }
}

解释下以上代码↑，简单来说关闭浏览器或者刷新页面时会触发@HostListener('window:unload', ['$event'])和@HostListener('window:beforeunload', ['$event'])，触发先后顺序是：window:beforeunload->window:unload.

刷新浏览器时：window:beforeunload->window:unload.会有10毫秒以上的延迟；

关闭浏览器时：window:beforeunload->window:unload.会有3毫秒以下的延迟

退出浏览器实质上还需要发送请求到退出登录的api进行信息验证：

 @HostListener('window:unload', ['$event'])
  onWindowClose(event: any): void
  {
    this.differTime = new Date().getTime() - this.beginTime;
    if(this.differTime <= 5) {
        const queryParams = new URLSearchParams({
          key: value//此处为键值对表达方式如： index : "hello world"
        });
      const url=`https://ithelp.ithome.com.tw`;//退出登录接口
      navigator.sendBeacon(url,queryParams);

    }else{
        console.log("browser refresh") 
    }
  }

需要注意的是navigator.sendBeacon(url,queryParams);该方法为异步请求到后端 。

navigator.sendBeacon具体的语法规程可以查看官方文档navigator官方文档，虽然官方文档不建议在beforeunload和unload中使用，但是在pc端使用的系统暂时来说是符合需求的，当然，有更好的方法，欢迎互相讨论。你有一个主意，我有一个主意，我们互相交换了就有两个好主意。