Two ways to implement Vue users to log out to the login page without operation for a long time

//html
<el-button type="primary" @click="loginIn">Click to log in</el-button>

// js
methods: {
    loginIn() {
      // Save the time of the first click sessionStorage.setItem("lastClickTime", new Date().getTime());
      //Simulate the backend to return a token
      sessionStorage.setItem('token',"token")
      this.$router.push({
        path: "/",
      });
    },
}

<template>
  <div class="homeBox">
    <!-- On the left is the menu level-->
    <div class="left">
      <div class="leftNav">
        <el-menu
          :default-active="activeIndex"
          class="elMenu"
          background-color="#333"
          text-color="#B0B0B2"
          active-text-color="#fff"
          :unique-opened="true"
          router
          ref="elMenu"
        >
          <el-menu-item index="/vue">
            <i class="el-icon-location-outline"></i>
            <span slot="title">vue page</span>
          </el-menu-item>
          <el-menu-item index="/react">
            <i class="el-icon-star-off"></i>
            <span slot="title">React page</span>
          </el-menu-item>
          <el-menu-item index="/angular">
            <i class="el-icon-pear"></i>
            <span slot="title">angular page</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- On the right is the view hierarchy-->
    <div class="right">
      <div class="rightTop">
        <el-button type="primary" plain @click="loginOut">Logout</el-button>
      </div>
      <div class="rightBottom">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      activeIndex: this.$route.path,
      timer: null,
    };
  },
  created() {
    /* 
      first step:
        When the component is initialized and loaded, it is bound to listen for click events. Note: the third parameter of addEventListener should be added here.
        Because the third parameter determines whether it is bubbling or capturing (false is the default for bubbling, true is for capturing), because we bind to listen for click events, we are capturing click events at the top-level DOM position, so the third parameter true should be added, so that we can listen to click events anywhere in the inner layer, and then store the click time*/
    window.addEventListener(
      "click",
      () => {
        // For convenience, we store the time of the click event directly in sessionStorage, so that it is easy to obtain and compare sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      true
    );
  },
  mounted() {
    /*
      Step 2:
        When the component is initialized and loaded, a timer must be bound to compare the difference between the current time and the last click time through the timer periodic polling*/
    this.isTimeOut();
  },
  methods: {
    isTimeOut() {
      // Before using the timer, clear the timer clearInterval(this.timer);
      this.timer = setInterval(() => {
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // Convert the string time of the last click into a digital time let nowTime = new Date().getTime(); // Get the current time console.log("Current time and previous click time", nowTime, lastClickTime);
        // Assume that our requirement is: if no click is performed for 5 seconds, a prompt to log in and out will appear if (nowTime - lastClickTime > 1000 * 5) {
          // Prompt the user this.$message({ type: "warning", message: "Timeout, logged out" });
          // Here we need to clear the timer and end the task clearInterval(this.timer);
          //Finally return to the login page this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  beforeDestroy() {
    // The last step is to clear the timer and unbind the click event clearInterval(this.timer) when leaving the page.
    window.removeEventListener("click", () => {}, true);
  },
};
</script>

// Mounted on the window object window.vm = new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

http.interceptors.response.use((res) => {
    console.log('Register globally',vm);
    var code = res.data.code;
    if(code == 4567){ // 4567 is the timeout status code. When we see this sign, we will ask the user to log out. // Note that the route jump is not this.$router.push() at this time. vm._router.push({ path: "/login" });
    }
    return res.data
}, (error) => {
    // console.log(error)
    return Promise.reject(error);
})