主动校验时间戳, 判断登录是否失效

src/store/modules/user.js

@@ -1,5 +1,5 @@
 // import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken, setTimeStamp } from '@/utils/auth'
 
 // 导入登录api
 import { getUserInfo, login, getUserDetailInfoById } from '@/api/user'
@@ -138,6 +138,7 @@ const actions = {
     const res = await login(data)
     console.log('将登录页的逻辑移动到 vuex 里面')
     commit('setToken', res)
+    setTimeStamp()
   },
   // 获取用户信息
   async getUserInfo({ commit }) {

src/utils/auth.js

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'hr_token' // 设定一个独一无二的key
+const timeKey = 'hr_timestamp_key' // 设置一个存时间戳的key
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -13,3 +14,16 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+// 设置时间戳的函数
+export function setTimeStamp() {
+  return Cookies.set(timeKey, Date.now())
+}
+// 获取时间戳
+export function getTimeStamp() {
+  return Cookies.get(timeKey)
+}
+// 删除时间戳
+export function removeTimeStamp() {
+  return Cookies.set(timeKey)
+}

src/utils/request.js

@@ -1,9 +1,12 @@
 import store from '@/store'
 import axios from 'axios'
+import router from '@/router'
+import { getTimeStamp } from '@/utils/auth'
 import { Message } from 'element-ui'
 // import { MessageBox, Message } from 'element-ui'
 // import store from '@/store'
 // import { getToken } from '@/utils/auth'
+const timeout = 1 * 60 * 60 * 60
 
 // create an axios instance
 const service = axios.create({
@@ -12,12 +15,22 @@ const service = axios.create({
   timeout: 5000 // request timeout
 })
 
-// request interceptor // axios的请求拦截器
+// request interceptor // axios的请求拦截器, 两个参数
 service.interceptors.request.use(
-  config => {
+  async config => {
     // 请求拦截器需要token的时候添加token
     if (store.getters.token && !config.headers.Authorization) { // 有token并且没有请求头
-      config.headers.Authorization = `Bearer ${store.getters.token}` // 在请求头添加token
+      // 先判断时间戳是否过期
+      // 如果时间戳已经过期, 1. 退出登录 2. 跳转登录页 3. 拦截剩下的请求
+      // 如果没过期, 给请求头添加token
+      if (checkTimeout()) {
+        await store.dispatch('user/logout')
+        router.push('/login')
+        // debugger
+        return Promise.reject('登录已过期')
+      } else {
+        config.headers.Authorization = `Bearer ${store.getters.token}` // 在请求头添加token
+      }
     }
     return config
   }, err => {
@@ -26,6 +39,12 @@ service.interceptors.request.use(
   }
 )
 
+// 校验时间戳函数
+const checkTimeout = () => {
+  const loginTimeStamp = getTimeStamp()
+  const nowTimeStamp = Date.now()
+  return nowTimeStamp - loginTimeStamp > timeout
+}
 // response interceptor
 // service.interceptors.response.use(
 //   /**