vue项目前端限制页面长时间未操作超时退出到登录页

Z时代
2024-01-10
分类：综合

vue

之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出

现在需要做到的效果是:页面超过30分钟未操作时,无论点击页面任何地方都退出到登录页

代码app.vue

<template>
  <!-- 添加点击事件 -->
  <div >
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      lastTime: null, // 最后一次点击的时间
      currentTime: null, // 当前点击的时间
      timeOut: 30 * 60 * 1000 // 设置超时时间:30分钟
    }
  },
  created () {
    this.lastTime = new Date().getTime()
  },
  methods: {
    isTimeOut () {
      this.currentTime = new Date().getTime() // 记录这次点击的时间
      if (this.currentTime - this.lastTime > this.timeOut) { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于30分钟
        if (localStorage.getItem('loginInfo')) { // 如果是登录状态
          this.$router.push({name: 'login'})
        } else {
          this.lastTime = new Date().getTime()
        }
      } else {
        this.lastTime = new Date().getTime() // 如果在30分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
      }
    }
  }
}
</script>