本文使用刷新接口去实现Token的无痕刷新，当拦截器检测到接口返回401响应码（即：认证失败），在拦截器中调用刷新接口去刷新Token，如果返回402（即：刷新token失效）则跳转到登录页，否则就更新Token信息。

定义相关接口

import request from '@/utils/request'  export function login(data) {   return request({     url: '/api/user/login',     method: 'post',     data   }) }  export function getInfo() {   return request({     url: '/api/user/info',     method: 'get'   }) }  export function tokenRefresh(data) {   return request({     url: '/api/user/token/refresh',     method: 'post',     data   }) }  export function logout() {   return request({     url: '/api/user/logout',     method: 'post'   }) } 

Token信息

{     "code": 200,     "msg": "成功",     "data": {         "accessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsInJvbGVJZHMiOiIxIiwibmFtZSI6ImFkbWluIiwiZGVwdElkIjoxLCJ0eXBlIjowLCJqdGkiOiI5Y2Y3MzAwMC00YjNiLTRjYzAtYTI1YS01ZDM5YjFhYmFlMDgiLCJleHAiOjE3MjA2ODkyNTAsImlhdCI6MTcyMDY4OTE5MCwic3ViIjoiUGVyaXBoZXJhbHMiLCJpc3MiOiJPY2VhbiJ9.0-E4S5NuXNZCNslhyVpBjFZVCIqDahn6wdBt0gAxxmU",         "accessTokenExpireIn": 1720689250,         "refreshToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsInJvbGVJZHMiOiIxIiwibmFtZSI6ImFkbWluIiwiZGVwdElkIjoxLCJ0eXBlIjoxLCJqdGkiOiIwZDEzMWUzNC1lOGNiLTRhZjItOTMyZC1iN2JlNzQzZDgzZjgiLCJleHAiOjE3MjA2OTYzOTAsImlhdCI6MTcyMDY4OTE5MCwic3ViIjoiUGVyaXBoZXJhbHMiLCJpc3MiOiJPY2VhbiJ9.TBfL8cNciiS9GbX-2T1ejWWHYdyrUzkJELixAcm8EJ0",         "refreshTokenExpireIn": 1720696390     } } 

定义前端拦截器 request.js

import axios from 'axios' import { Message } from 'element-ui' import { getToken, getRefreshToken, setToken, removeToken } from '@/utils/auth' import { tokenRefresh } from '@/api/user'  // 创建 axios 实例 const service = axios.create({   // 请求地址前缀   baseURL: process.env.VUE_APP_BASE_API,   // 请求5s超时   timeout: 5000 // request timeout })  // Request 拦截器 service.interceptors.request.use(      config => {      // 从cookie中获取令牌信息，并放入接口头信息中     const token = getToken()     if (token) {       config.headers['Authorization'] = token     }      return config   },   error => {     // do something with request error     console.log(error) // for debug     return Promise.reject(error)   }  )  // 刷新令牌的标记 let isRefreshing = false  // 重试请求队列 let requests = []  // Response 拦截器 service.interceptors.response.use(      response => {          const res = response.data     if (res.code === 200) {       return res     }      if(res.code === 402) {       removeToken()       location.reload()     }      // 401: 认证失败，402:令牌过期     if(res.code === 401) {        const refreshToken = getRefreshToken()       if(!isRefreshing) {                  isRefreshing = true         // 刷新令牌，刷新成功后进行客户端令牌更新         return tokenRefresh( {refreshToken: refreshToken} ).then(result => {                      const data = result.data           setToken(data.accessToken, data.refreshToken)            const token = data.accessToken           response.config.headers['Authorization'] = token           // token 刷新后将数组的方法重新执行           requests.forEach((request) => request(token))           // 重新请求完清空           requests = []             return service(response.config)         }).catch(() => {           removeToken()           location.reload()         }).finally(() => {           isRefreshing = false         })        } else {         // 返回未执行 resolve 的 Promise         return new Promise(resolve => {           // 用函数形式将 resolve 存入，等待刷新后再执行           requests.push(token => {             response.config.headers['Authorization']  = token             resolve(service(response.config))           })         })       }     }      Message({       message: res.msg || 'Error',       type: 'error',       duration: 5 * 1000     })      return Promise.reject(new Error(res.msg || 'Error'))   },   error => {     console.log('err' + error) // for debug     Message({       message: error.msg,       type: 'error',       duration: 5 * 1000     })          return Promise.reject(error)   } )  export default service 

定义Token校验路由跳转 permission.js

import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import getPageTitle from '@/utils/get-page-title'  NProgress.configure({ showSpinner: false }) // NProgress Configuration  const whiteList = ['/login'] // no redirect whitelist  router.beforeEach(async(to, from, next) => {   // start progress bar   NProgress.start()    // set page title   document.title = getPageTitle(to.meta.title)    // determine whether the user has logged in   const hasToken = getToken()    if (hasToken) {     if (to.path === '/login') {       // if is logged in, redirect to the home page       next({ path: '/' })       NProgress.done()     } else {       const hasGetUserInfo = store.getters.name       if (hasGetUserInfo) {         next()       } else {         try {           // get user info           await store.dispatch('user/getInfo')            next()         } catch (error) {           // remove token and go to login page to re-login           await store.dispatch('user/resetToken')           Message.error(error || 'Has Error')           next(`/login?redirect=${to.path}`)           NProgress.done()         }       }     }   } else {     /* has no token*/      if (whiteList.indexOf(to.path) !== -1) {       // in the free login whitelist, go directly       next()     } else {       // other pages that do not have permission to access are redirected to the login page.       next(`/login?redirect=${to.path}`)       NProgress.done()     }   } })  router.afterEach(() => {   // finish progress bar   NProgress.done() }) 

Token前端缓存 auth.js

const TokenKey = 'accessToken' const RefreshTokenKey = 'refreshToken'  export function getToken() {   return localStorage.getItem(TokenKey) }  export function getRefreshToken() {   return localStorage.getItem(RefreshTokenKey) }  export function setToken(accessToken, refreshToken) {   localStorage.setItem(TokenKey, accessToken)   localStorage.setItem(RefreshTokenKey, refreshToken) }  export function removeToken() {   localStorage.removeItem(TokenKey)   localStorage.removeItem(RefreshTokenKey) }