Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线(示例代码)

data() {
    return {
      lastTime: null,
      timeOut: 10 * 100 * 60,
    }
  },
metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
  },
  created() {
    this.lastTime = new Date().getTime()
  },
methods: {
    //全局监听得点击事件
    isTimeOut() {
      var currentTime = new Date().getTime();
      // 判断上次最后一次点击的时间和这次点击的时间间隔
       if (currentTime - this.lastTime > this.timeOut) {
        //这个是判断 当前用户是否登录，根据自己的情况写
        // if (null != sessionStorage.getItem('token')) {
        this.$alert('身份验证已过期，请重新登录', '提示', {
          confirmButtonText: '确定',
          callback: action => {
           //这里写路由（跳转到登录页）
           this.$router.replace('/login')
          }
        });
        // }
      } else {
        // 如果在期限内点击，则把这次点击的时间覆盖掉之前存的最后一次点击的时间
        this.lastTime = new Date().getTime()
      }
    }
  }

1.在util文件夹下创建一个storage.js封装localStorage方法,js文件内容如下
export default {
  setItem(key, value) {
    value = JSON.stringify(value)
    window.localStorage.setItem(key, value)
  },
  getItem(key, defaultValue) {
    let value = window.localStorage.getItem(key)
    try {
      value = JSON.parse(value)
    } catch {}
    return value || defaultValue
  },
  removeItem(key) {
    window.localStorage.removeItem(key)
  },
  clear() {
    window.localStorage.clear()
  },
}
=======================================================================
2.在util文件夹下创建一个astrict.js，js文件内容如下，引入的文件根据自己实际路径
// 引入路由和storage工具函数
import storage from '../utils/storage'
import router from '../router'  
let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 1 * 60 * 1000 //设置超时时间: 30分钟
window.onload = function() {
  window.document.onmousedown = function() {
    storage.setItem('lastTime', new Date().getTime())
  }
}
function checkTimeout() {
  currentTime = new Date().getTime() //更新当前时间
  lastTime = storage.getItem('lastTime')
  console.log(lastTime)
  if (currentTime - lastTime > timeOut) {
    //判断是否超时
    // 清除storage的数据(登陆信息和token)
    storage.clear()
    console.log(router)
    // 跳到登陆页
    // if (router.currentRouter.name == 'login') return // 当前已经是登陆页时不做跳转
    router.push({ name: 'login' })
  }
}
export default function() {
  /* 定时器 间隔30秒检测是否长时间未操作页面 */
  window.setInterval(checkTimeout, 3000)
}
=======================================================
3.在main.js引入astrict.js
import Astrict from '../src/utils/astrict.js'
Vue.use(Astrict)
另附原文地址：https://www.uoften.com/article/186408.html

<strong>sessionStorage.setItem("lastClickTime", new Date().getTime());</strong>

methods:{
      login(){
           this.$api.commn.login(this.loginForm.username, this.loginForm.password).then((result) => {   
             let res = result.data;
             let token = "Bearer " + res.token;
             this.$storage.token.set(token);
             this.$storage.user.set(res);
             //记录点击时间
             sessionStorage.setItem("lastClickTime", new Date().getTime());
          })
          .catch((error) => {
            console.log("error");
          });
       }
   }

<template>
    <div class="sidebar" style="background-color: rgb(50, 65, 87)">
      <!--左侧菜单 start    *********************************************************************-->
      <el-menu
        class="sidebar-el-menu"
        :collapse="collapse"
        router=""
        :default-active="onRoutes">
        <template v-for="menu in menus">
          <template v-if="menu.subs && menu.subs.length > 0">
            <el-submenu :index="menu.id + ''">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ $t(menu.name) }}</span>
              </template>
            </el-submenu>
          </template>
      </el-menu>
      <!--左侧菜单 end    *********************************************************************-->
    </div>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <v-tags></v-tags>
      <!--内容 start    *********************************************************************-->
      <!--内容 end    *********************************************************************-->
    </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      timer: null,
    };
  },
  methods: {
    isTimeOut() {
      // 使⽤定时器之前，要清除⼀下定时器
      clearInterval(this.timer);
     // 定时器
      this.timer = setInterval(() => { 
        let times = 10 * 60 * 1000;//配置的是10min 
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // 把上次点击时候的字符串时间转换成数字时间
        let nowTime = new Date().getTime(); // 获取当前时间
        // 当前时间减去上次点击时间超出配置的登出时间，就提⽰登录退出
        if (nowTime - lastClickTime > times) {
          // 提⽰⼀下⽤户
          this.$message({ type: "warning", message: "超时了，已退出登录" });
          // 这⾥要清除定时器，结束任务
          clearInterval(this.timer);
          // 最后返回到登录页
          this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  mounted() {
    //在这执行定时器
     this.isTimeOut()
  },
  created() {
    window.addEventListener("click",() => {
        // 为了⽅便，我们把点击事件的时间直接存到sessionStorage中去，这样⽅便获取⽐较
        sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      //true 捕获点击事件
      true
    );
  },
  destroyed: function () {
     clearInterval(this.timer);
     window.removeEventListener("click", () => {}, true);
  },
};
</script>