通过onunload事件实现页面关闭退出登录,刷新页面依然保持登录态

项目场景:

项目需要判断页面或浏览器是关闭了还是刷新,以此来判断要不要强制用户重新登录

刷新:保持登录状态

关闭:退出登录

网上的解决办法:


//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那么就会重新登陆。虽然办法不是很完美,但是凑合用了。哈哈哈哈^_^

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柑橘乌云_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值