项目场景:
项目需要判断页面或浏览器是关闭了还是刷新,以此来判断要不要强制用户重新登录
刷新:保持登录状态
关闭:退出登录
网上的解决办法:
//app.vue中
let beforeUnloadTime = ref(0)//起始时间戳
let gapTime = ref(0)//判断页面是刷新还是关闭
onMounted(() => {
// 刷新时保留本地数据,关闭浏览器删除本地数据 (数据安全方面)
window.addEventListener('beforeunload', e => {
console.log("beforeunload")
beforeUnloadTime.value = new Date().getTime();
})
window.addEventListener('unload', e => {
console.log("unload")
gapTime.value = new Date().getTime() - beforeUnloadTime.value;
//判断是窗口关闭还是刷新
if (gapTime.value <= 9.9) {//这个9.9阈值很难判定,是一步一步试过来的,不同浏览器兼容性不一样
console.log("关闭");
userStore.LoginOut()
} else {//刷新做事
console.log("刷新");
}
})
})
onUnmounted(() => {
window.removeEventListener('beforeunload')
window.removeEventListener('unload')
})
上面这个办法不太行。
最终找到了这个办法,大家可以参考一下:
onMounted(() => {
// 进入页面执行
// 记录当前时间并转成时间戳
const now = new Date().getTime();
// 从缓存中获取用户上次退出的时间戳
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
// 判断是否为刷新,两次间隔在5s内判定为刷新操作
const refresh = (now - leaveTime) <= 1000;
// 测试alert
// alert(refresh ? '刷新' : '重新登陆');
if(refresh){
}else{
userStore.ClearStorage()
userStore.$reset()//重置store
window.location.reload()
}
window.addEventListener('unload', e => {
localStorage.setItem('leaveTime', new Date().getTime());
})
// 退出当前页面执行
// window.onunload = function (e) { // ios 不支持 window.onbeforeunload()
// // 将退出时间存于localstorage中
// localStorage.setItem('leaveTime', new Date().getTime());
// }
})
onUnmounted(() => {
window.removeEventListener('unload')
})
上面这个办法 就是只要关闭页面再打开页面之间的事件不小于1s那么就会重新登陆。虽然办法不是很完美,但是凑合用了。哈哈哈哈^_^