vue页面无操作定时登出


前言

提示:这里可以添加本文要记录的大概内容:

例如:登录后按时登出操作


提示:以下是本篇文章正文内容,下面案例可供参考

声明变量

//
            lastTime: null, // 鼠标最后一次点击时间
            currentTime: null, // 当前时间
            sys_timeout:1000 * 60 * 10 , // 系统安全时间  //登出时间
            check_time:1000 * 2, //探测间隔时间
            timer: null,  // 定时器

监听鼠标点击和键盘操作,清除储存的时间

mounted() {
    
    
        //定时
        this.currentTime = new Date().getTime();
        this.lastTime = new Date().getTime();
        // 监听鼠标点击时间,获取最后一次点击时间
        window.document.onmousedown = (event) => {
    
    
          // console.log('重置最后一次点击时间');
          this.lastTime = new Date().getTime();
        }
        window.document.onmousemove = (event) => {
    
    
          // console.log('重置最后一次移动时间');
          this.lastTime = new Date().getTime();
        }
        window.document.onkeydown = (event) => {
    
    
          // console.log('重置最后一次键盘按下时间');
          this.lastTime = new Date().getTime();
        }
        this.onload(); 
    },

离开页面销毁定时器

beforeDestroy() {
    
        //页面关闭时清除定时器  
         clearInterval(this.timer)
    },

隔段时间检查时间是否超出

 methods: {
    
    
      // 间隔特定时间检测系统无操作时间
      onload() {
    
    
          this.timer = window.setInterval(this.checkTimeOut, this.check_time)
        },
        // 判断系统无操作时间是否大于安全时间
        checkTimeOut() {
    
    
          this.currentTime = new Date().getTime();
          if(this.currentTime - this.lastTime > this.sys_timeout) {
    
    
                // todo 退出登录
                this.logout()
          }
        },
   }

总结

提示:这里对文章进行总结:一定时间登出操作

猜你喜欢

转载自blog.csdn.net/yang20000222/article/details/131549807
今日推荐