Vue.js框架：超出配置登出时间就会退出登陆（前端设置）

1、login.vue

     在登陆时候记下点击登陆的时间；

sessionStorage.setItem("lastClickTime", new Date().getTime());

   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");
          });
       }
   }

2、home.vue

  代码精简了，html只剩下左边菜单栏，展示定时器写在哪个页面，各个项目不同，对应的不一定是home.vue，函数只写了定时器的，仅供参考；

  1. data先定义timer

  2.钩子函数：methods里写定时器实现函数，created里捕获记录每次点击的时间，mounted里执行定时器，destroyed里销毁定时器。

<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>