vue3 typescript项目当浏览器关闭时，用户退出登录

需求

当浏览器关闭时，用户退出登录，刷新时不变，要点：判断浏览器刷新还是关闭。
app.vue页面

ts代码

1.判断浏览器的类型

/**
 * 判断是360浏览器还是谷歌浏览器
 * @returns 360 true 谷歌false
 */
function checkChromeForNum() {
	var uas = navigator.userAgent.split(' ')
	for (var key in navigator.plugins) {
		if (navigator.plugins[key].filename == 'np-mswmp.dll') {
			return '360'
		}
	}
	return '谷歌'
}

/**
 * 判断浏览器的类型（edge浏览器、搜狗浏览器、qq浏览器、火狐浏览器）
 * @returns
 */
const checkChromeType = () => {
	var uas = navigator.userAgent.split(' ')
	for (var element in uas) {
		if (uas[element].toLowerCase().includes('edg')) {
			// ie浏览器
			return 'edge'
		} else if (uas[element].toLowerCase().includes('se') && !uas[element].toLowerCase().includes('qqbrowser')) {
			// 搜狗浏览器
			return 'sg'
		} else if (uas[element].toLowerCase().includes('qqbrowser')) {
			// qq浏览器
			return 'qq浏览器'
		} else if (uas[element].toLowerCase().includes('firefox')) {
			// 火狐浏览器
			return 'firefox'
		}
	}
}
/**
 * 其他浏览器设置为谷歌浏览器（妥协办法）
 * @returns
 */
export function isNumberBrowser() {
	if (checkChromeForNum() == '360') {
		return '360'
	} else {
		if (checkChromeType()) {
			return checkChromeType()
		} else {
			return '谷歌'
		}
	}
}

2.在浏览器关闭时判断进行刷新还是关闭，退出用户

onMounted(() => {
	window.addEventListener('beforeunload', e => beforeunloadHandler(e))
	window.addEventListener('unload', e => unloadHandler(e))
})

const beforeunloadHandler = (event: any) => {
	state.onbeforeTime = new Date().getTime()
}
const unloadHandler = (e: any) => {
	state.unloadTime = new Date().getTime()
	if (isNumberBrowser() === '360') {
		state.gapTime = 13
	} else if (isNumberBrowser() === '谷歌') {
		state.gapTime = 12
	} else if (isNumberBrowser() === 'edge') {
		state.gapTime = 13
	} else if (isNumberBrowser() === 'sg') {
		state.gapTime = 9
	} else if (isNumberBrowser() === 'qq浏览器') {
		state.gapTime = 9
	} else if (isNumberBrowser() === 'firefox') {
		state.gapTime = 9
	}
	localStorage.setItem('lastTimedsf', (state.unloadTime - state.onbeforeTime).toString())
	if (state.unloadTime - state.onbeforeTime < state.gapTime) {
		if (userStore.token) {
			//TODO: 进行退出登录请求 fetch方法（有小概率事件，没有请求退出方法，直接删除token了）
			fetch('/sys/logout', {
				method: 'POST',
				headers: { 'Content-Type': 'application/x-www-form-urlencoded', Authorization: userStore.token },
				// 在页面关闭时，仍进行请求
				keepalive: true
			})
			//TODO: 删除token；（若有refreshToken，在这里不删除refreshToken，当用户重新登录时，根据refreshToken判断用户是否退出成功）
		}
	}
	SessionStorage.removeItem('onbeforeTime')
}
// 在组件中监听页面的onload事件
window.onload = function () {
	window.document.onmousedown = () => {
		const lastTime_onload = new Date().getTime()
		localStorage.setItem('lastTime', lastTime_onload.toString())
	}
}