[JavaScript知识库]vue3.2 被迫退出（登陆过期）

1、@/utils/Constans.js (设置常量)

// key
export const TOKEN_TIME = 'tokenTime'
// value---有效时长
export const TOKEN_TIME_VALUE = 24 * 60 * 60 * 1000

2、@/utils/auth.js（实现方法）

// 引入常量
import { TOKEN_TIME, TOKEN_TIME_VALUE } from './constant'

// 登陆时设置时间
export const setTokenTime = () => {
  localStorage.setItem(TOKEN_TIME, Date.now())
}

// 获取登陆时间
export const getTokenTime = () => {
  return localStorage.getItem(TOKEN_TIME)
}

// 比较，查看是否已经过期
export const diffTokenTime = () => {
  const currentTime = Date.now() // 当前时间
  const tokenTime = getTokenTime() // 登陆时间
  return currentTime - tokenTime > TOKEN_TIME_VALUE
}

3 、使用，在@/api/request.js的请求拦截器中设置

// 导入被动退出的方法
import { diffTokenTime } from '@/utils/auth'
// vuex退出操作
import store from '@/store'


// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 被动退出
    if (localStorage.getItem('token')) {
      if (diffTokenTime()) {
        store.dispatch('app/logout')
        return Promise.reject(new Error('token失效了'))
      }
    }

    config.headers.Authorization = localStorage.getItem('token')
    return config
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)

4、vuex设置退出方法 @/store/app,同时登陆的时候也要设置登陆的时间

//退出方法
  logout({ commit }) {
      commit('setToken', '')
      localStorage.clear()
      router.replace('/login')
    }

// 引入设置登陆时间方法
import { setTokenTime } from '@/utils/auth'
登陆方法中实现  
setTokenTime()