需求场景一:用户退出时清空localStorage并告知后台用户退出,保持登录状态时关闭窗口或者浏览器达到相同目的
实现:
// 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件
// 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload之后被触发
// 参考地址:https://blog.csdn/weixin_45372546/article/details/108538026
// 要做到全局监听,我直接放在了入口文件中 因个人项目而异
data(){
return {
_beforeUnload_time:'',
_gap_time:''
}
},
mounted() {
window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
window.addEventListener("unload", (e) => this.unloadHandler(e));
},
methods: {
beforeunloadHandler(e) {
this._beforeUnload_time = new Date().getTime();
//e.returnValue = '关闭提示'; 弹窗
},
unloadHandler(e) {
let _this = this;
this._gap_time = new Date().getTime() - this._beforeUnload_time;
//判断是窗口关闭还是刷新
if (this._gap_time <= 5) {
// 退出登录
xxxxxxxx
// 通知后台
xxxxxxxx
}
},
},
destroyed() {
window.removeEventListener("beforeunload", (e) =>
this.beforeunloadHandler(e)
);
window.removeEventListener("unload", (e) => this.unloadHandler(e));
}
场景二:二次验证的登录信息一般会存在localStorage中或则session中,但是在浏览器无痕模式中是不能用的,localStorage中是有数据的就是不能用,你说气人不。。。
一些特殊项目中可以硬提示不允许使用无痕模式
// 可以先给localStorage进行写入和删除来判断是否无痕模式
try{
window.localStorage.setItem('test', 'testValue')
window.localStorage.removeItem("test")
}catch(error){
layer.open("请切换浏览器的无痕模式")
// 操作XXXX
function () {
XXXXXX
}
}
虽然有点流氓O(∩_∩)O哈哈~
更多推荐
vue 全局监听浏览器窗口关闭以及无痕模式场景提示
发布评论