vue 实现 页面无操作 退出登陆

// app.vue
<template>
  <div id="app" @mouseover="isDon">
    <router-view />
  </div>
</template>

js 部分 代码简单易懂 不多做赘述

<script>
export default {
  name: 'app',
  data () {
    return {
      logoutTime: null
    }
  },
  watch: {
    $route (to, from) {
      if (from.path === '/login') {
        this.isDon()
      }
    }
  },
  destroyed: function () {
    clearTimeout(this.logoutTime)
  },
  methods: {
    goBack () {
      sessionStorage.clear()
      localStorage.clear()
      this.$router.push({ path: '/login' })
      clearTimeout(this.logoutTime)
    },
    isDon () {
      clearTimeout(this.logoutTime)
      // 20分钟无操作自动退出登录
      this.logoutTime = setTimeout(() => {
        this.goBack()
        if (this.$route.path !== '/login') {
          this.$message({
            type: 'error',
            message: '长时间无操作，退出登录。'
          })
        }
      }, 20 * 60 * 1000)
    }
  }
}
</script>