前端不断的刷新当前时间并最后一次点击时间进行比较,若大于超时时间则判断用户是否在登录状态,若在登录状态退出登录,其中,登录状态由sessionStorage保存
1.在app.vue的模板上加(写监听无疑在app.vue里写是最好的)

<template>
    <div id="app" @click="clicked">
        // TO DO
    </div>
</template>

2.在script里加上判定时间

export default{
  name: 'App',
  data (){
  return {
  lTime: new Date().getTime(), // 最后一次点击的时间
  cTime: new Date().getTime(), //当前时间
  tOut: 10800000,   //超时时间
  }
  },
  methods:{
  clicked () {
  this.lTime = new Date().getTime()  //当界面被点击更新点击时间
  },
  tTime() {
  this.cTime = new Date().getTime()
    if (this.cTime -this.lTime > this.tOut) {
  // if(JSON.parse(sessionStorage.getItem('Login')) === true){
  // 退出登录这里写清除cookies等操作
  // }
  }
  }
  }
  }

这里之所以把setInterval 写在mounted而不是methods,是因为methods是方法调用的时机不一定

关于mounted:
1.钩子函数:钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤、访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统

2.相对于前端来说,钩子函数就是指所有函数执行前,我先执行了函数,即勾住我感兴趣的函数,只要它执行,我就先执行

3.与created相比:mounted主要是在模板渲染成html后,通常是初始化页面完成之后,再对html dom节点进行操作

Logo

前往低代码交流专区

更多推荐