// html
<el-button type="primary" @click="loginIn">點(diǎn)擊登錄</el-button>

// js
methods: {
    loginIn() {
      // 存第一份點(diǎn)擊的時(shí)間
      sessionStorage.setItem("lastClickTime", new Date().getTime());
      // 模擬后端返回存一個(gè)token
      sessionStorage.setItem('token',"token")
      this.$router.push({
        path: "/",
      });
    },
}

<template>
  <div class="homeBox">
    <!-- 左邊是菜單層級(jí) -->
    <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頁(yè)面</span>
          </el-menu-item>
          <el-menu-item index="/react">
            <i class="el-icon-star-off"></i>
            <span slot="title">react頁(yè)面</span>
          </el-menu-item>
          <el-menu-item index="/angular">
            <i class="el-icon-pear"></i>
            <span slot="title">angular頁(yè)面</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 右邊是視圖層級(jí) -->
    <div class="right">
      <div class="rightTop">
        <el-button type="primary" plain @click="loginOut">登出</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() {
    /* 
      第一步：
        組件初始化加載就綁定監(jiān)聽(tīng)點(diǎn)擊事件，注意：addEventListener的第三個(gè)參數(shù)，這里要加上。
        因?yàn)榈谌齻€(gè)參數(shù)決定了是冒泡還是捕獲（false冒泡默認(rèn)，true捕獲），因?yàn)榻壎ūO(jiān)聽(tīng)點(diǎn)擊事件，我們是在最
        頂層的DOM位置進(jìn)行捕獲點(diǎn)擊事件，所以第三個(gè)參數(shù)true，要加上的，這樣的話，內(nèi)層的任意地方的點(diǎn)擊事件
        我們就都能監(jiān)聽(tīng)到了，然后存儲(chǔ)一下點(diǎn)擊的時(shí)間
    */
    window.addEventListener(
      "click",
      () => {
        // 為了方便，我們把點(diǎn)擊事件的時(shí)間直接存到sessionStorage中去，這樣方便獲取比較
        sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      true
    );
  },
  mounted() {
    /*
      第二步：
        組件初始化加載時(shí)也要綁定一個(gè)定時(shí)器，通過(guò)定時(shí)器定時(shí)輪詢，去對(duì)比當(dāng)前時(shí)間和上次點(diǎn)擊的時(shí)間的差值
    */
    this.isTimeOut();
  },
  methods: {
    isTimeOut() {
      // 使用定時(shí)器之前，要清除一下定時(shí)器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // 把上次點(diǎn)擊時(shí)候的字符串時(shí)間轉(zhuǎn)換成數(shù)字時(shí)間
        let nowTime = new Date().getTime(); // 獲取當(dāng)前時(shí)間
        console.log("當(dāng)前時(shí)間和之前點(diǎn)擊時(shí)間", nowTime, lastClickTime);
        // 假設(shè)我們需求是：5秒鐘不進(jìn)行點(diǎn)擊操作，就提示登錄退出
        if (nowTime - lastClickTime > 1000 * 5) {
          // 提示一下用戶
          this.$message({ type: "warning", message: "超時(shí)了，已退出登錄" });
          // 這里要清除定時(shí)器，結(jié)束任務(wù)
          clearInterval(this.timer);
          // 最后返回到登錄頁(yè)
          this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  beforeDestroy() {
    // 最后一步，離開(kāi)頁(yè)面的時(shí)候，清除一下定時(shí)器，也解綁點(diǎn)擊事件
    clearInterval(this.timer);
    window.removeEventListener("click", () => {}, true);
  },
};
</script>

// 掛載到window對(duì)象上
window.vm = new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

http.interceptors.response.use((res) => {
    console.log('注冊(cè)到全局上',vm);
    var code = res.data.code;
    if(code == 4567){ // 4567是超時(shí)狀態(tài)碼，看到這個(gè)標(biāo)識(shí)我們就讓用戶退出登錄
        // 注意，這個(gè)時(shí)候路由跳轉(zhuǎn)就不是this.$router.push()了
        vm._router.push({ path: "/login" });
    }
    return res.data
}, (error) => {
    // console.log(error)
    return Promise.reject(error);
})