美文网首页
Vue判断用户长时间未操作

Vue判断用户长时间未操作

作者: 阿羡吖 | 来源:发表于2019-11-11 10:57 被阅读0次
 <template>
    <div id ="app" @click="isDo()"></div>
</template>

<script>
exoprt default{
  data(){
    return{
        lastTime:null, //第一次点击事件
        currentTime:null,  //当前点击事件
        timeOut:30*60*1000 // 设置超时时间:30分钟
    }
  },
  created(){
    this.lastTime  = new Date().getTime();  // 网页第一次打开时,记录当前时间
  },
   mounted(){
      var quitTIme = window.setInterval(this.testTime,1000);
  },
  methods:{
    isDo(){
      this.currentTime = new Date().getTime(); // 记录当前点击的时间
      if(this.currentTIme - this.lastTime > this.timeOut){ //判断上次最后一次的点击时间和最新的点击时间间隔时候大于30分钟
      // 这里写状态已过期后执行的操作
      localStorage.removeItem("token");
       this.$router.push({ path: '/login' });
        // 清除定时器
       window.clearInterval(quitTIme);
      }else{
        this.lastTime  = new Date().getTime(); //如果30分之内点击,则把最新时间记录覆盖掉之前存的最后一次点击时间
      }
    }
  }
}
</script>

相关文章

网友评论

      本文标题:Vue判断用户长时间未操作

      本文链接:https://www.haomeiwen.com/subject/ingzbctx.html