需求:关闭浏览器同时实现退出登录,刷新页面不退出登录
背景:退出登录需要发送请求到后端,后端进行用户信息判断才可退出登录
由于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: