vue中判定登录状态长时间未登录时退出登录清除存在cookies里存的登录信息

深碍√TFBOYSˉ_ 2023-06-06 08:17 22阅读 0赞

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

**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节点进行操作