vue 关闭浏览器清空token (区分刷新)
知识点浏览器关闭执行的是 beforeunload , unload 这两个事件;而浏览器刷新执行的是beforeunload, unload, load 三个事件;思路虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。所以,通过时间差来判断浏览器是刷
·
知识点
浏览器关闭执行的是 beforeunload , unload 这两个事件;
而浏览器刷新执行的是beforeunload, unload, load 三个事件;
思路
虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。
所以,通过时间差来判断浏览器是刷新还是关闭,浏览器执行beforeunload的时候给一个开始时间,执行unload的时候给一个结束时间;判断一下时间差;我设置的是5毫秒来区分浏览器的关闭和刷新,具体的时间最好还是亲自测一下;
mounted() {
let beginTime = 0; //开始时间
let differTime = 0; //时间差
window.onunload = function () {
differTime = new Date().getTime() - beginTime;
if (differTime <= 5) {
console.log("这是关闭");
localStorage.setItem("token", "");
//退出登录跳到首页
this.$router.push({ path: "/" });
} else {
console.log("这是刷新");
}
};
window.onbeforeunload = function () {
beginTime = new Date().getTime();
};
},
更多推荐
已为社区贡献4条内容
所有评论(0)