<template>
  <!-- 添加點(diǎn)擊事件 -->
  <div id="app" style="height: 100%" @click="isTimeOut">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      lastTime: null, // 最后一次點(diǎn)擊的時(shí)間
      currentTime: null, // 當(dāng)前點(diǎn)擊的時(shí)間
      timeOut: 15 * 60 * 1000 // 設(shè)置超時(shí)時(shí)間:30分鐘
    }
  },
  created () {
    this.lastTime = new Date().getTime()
  },
  methods: {
    isTimeOut () {
      this.currentTime = new Date().getTime() // 記錄這次點(diǎn)擊的時(shí)間
      if (this.currentTime - this.lastTime > this.timeOut) { // 判斷上次最后一次點(diǎn)擊的時(shí)間和這次點(diǎn)擊的時(shí)間間隔是否大于30分鐘
        if (localStorage.getItem('loginInfo')) { // 如果是登錄狀態(tài)
          localStorage.clear()
          sessionStorage.clear();
          this.$router.push({name: 'login'})
        } else {
          this.lastTime = new Date().getTime()
        }
      } else {
        this.lastTime = new Date().getTime() // 如果在30分鐘內(nèi)點(diǎn)擊，則把這次點(diǎn)擊的時(shí)間記錄覆蓋掉之前存的最后一次點(diǎn)擊的時(shí)間
      }
    }
  }
}
</script>

import { Local, Session } from "./storage"
import router from '/@/router';
const timeOut = 15 * 60 * 1000; //設(shè)置超時(shí)時(shí)間： 15分
function updateActiveTime() {
  localStorage.setItem('lastActiveTime', new Date().getTime() + '');
}
window.onload = function () {
  window.document.onmousedown = updateActiveTime;
};
let checkActiveInterval: any = null
export const startActiveCheck = () => {
  if (checkActiveInterval !== null) return
  updateActiveTime();
  checkActiveInterval = setInterval(() => {
    const currentTime = new Date().getTime();
    const lastActiveTime = localStorage.getItem('lastActiveTime');
    if (currentTime - Number(lastActiveTime) > timeOut) {
      Local.clear();
      Session.clear();
      clearInterval(checkActiveInterval)
      checkActiveInterval = null
      router.push('/login');
    }
  }, 30000);
}
export const endActiveCheck = () => {
  clearInterval(checkActiveInterval)
  checkActiveInterval = null
}

import Cookies from 'js-cookie';
/**
 * window.localStorage 瀏覽器永久緩存
 * @method set 設(shè)置永久緩存
 * @method get 獲取永久緩存
 * @method remove 移除永久緩存
 * @method clear 移除全部永久緩存
 */
export const Local = {
	// 查看 v2.4.3版本更新日志
	setKey(key: string) {
		// @ts-ignore
		return `${__NEXT_NAME__}:${key}`;
	},
	// 設(shè)置永久緩存
	set<T>(key: string, val: T) {
		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 獲取永久緩存
	get(key: string) {
		let json = <string>window.localStorage.getItem(Local.setKey(key));
		try{
			return JSON.parse(json);
		}catch{
			return json
		}
	},
	// 移除永久緩存
	remove(key: string) {
		window.localStorage.removeItem(Local.setKey(key));
	},
	// 移除全部永久緩存
	clear() {
		window.localStorage.clear();
	},
};
/**
 * window.sessionStorage 瀏覽器臨時(shí)緩存
 * @method set 設(shè)置臨時(shí)緩存
 * @method get 獲取臨時(shí)緩存
 * @method remove 移除臨時(shí)緩存
 * @method clear 移除全部臨時(shí)緩存
 */
export const Session = {
	// 設(shè)置臨時(shí)緩存
	set<T>(key: string, val: T) {
		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 獲取臨時(shí)緩存
	get(key: string) {
		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
		return JSON.parse(json);
	},
	// 移除臨時(shí)緩存
	remove(key: string) {
		window.sessionStorage.removeItem(Local.setKey(key));
	},
	// 移除全部臨時(shí)緩存
	clear() {
		window.sessionStorage.clear();
	},
};

import { endActiveCheck, startActiveCheck } from '../utils/activeCheck';
// 路由加載后
router.afterEach((to) => {
  NProgress.done();
  if (to.path === '/login') {
    endActiveCheck()
  } else {
    startActiveCheck()
  }
});