不通过后端,仅仅前端,vue中如何设置页面的过期时间,比如10分钟无操作就退出?

swnuv
  • 3.8k

不用session控制,就纯前端,用vue如何做

回复
阅读 502
2 个回答
南客
  • 5
新手上路,请多包涵

1、建立个settimeout开始延时十分钟然后监听window的click有必要可以监听鼠标移动,触发就重新计时
window.addEventListener("click", function(e){});
2、同样是监听然后记录触发时间,与上次触发时间对比,如果超过指定时间退出

这比较简单,通过事件、定时器就能搞定。大致思路如下:

  1. body标签添加鼠标移入事件,主要用来鉴定是否操作页面,伪代码如下:
      document.addEventListener('mouseover',() => {
        this.timerCount = 0
        //如果开启了定时器,则清除,重新赋值,并重新计数
       if(this.timer) {
          clearInterval(this.timer);
          this.timer = null
       }
      })
  1. 初始化设置一个定时器变量timer,并给它赋值,伪代码如下:
this.timer = setInterval(()=>{
  this.timerCount++
  if(this.timerCount == 10*60) {
    //退出登录
    //清除定时器
  }
}, 1000)
宣传栏