vue項目前端限制頁面長時間未操作超時退出到登錄頁

之前項目超時判斷是后台根據token判斷的,這樣判斷需要請求接口才能得到返回結果,這樣就出現頁面沒有接口請求時還可以點擊,有接口請求時才會退出

現在需要做到的效果是:頁面超過30分鍾未操作時,無論點擊頁面任何地方都退出到登錄頁

代碼app.vue

<template>
  <!-- 添加點擊事件 -->
  <div id="app" style="height: 100%" @click="isTimeOut">
    <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>

OK, The end...