Token的有效性可以保持一段时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报错，所以需要我们做一些处理
1. 在响应拦截器里面拦截这个错误
2. 拦截到后需要做的事：
// utils/http.js
import axios from "axios";
import {useUserStore} from "@/stores/user";
import router from '@/router'
const httpInstance = axios.create({
baseURL: 'url', // 基地址
timeout: 5000 // 超时器
})
//拦截器
httpInstance.interceptors.request.use(config => {
return config
}, e => Promise.reject(e))
//响应器
httpInstance.interceptors.response.use(res => res.data, e => {
const userStore = useUserStore() //pinia管理的用户数据
// 401 token失效处理
// 1. 清除本地用户数据
// 2.跳转到登录页
if (e.response.status === 401) {
userStore.clearUserInfo()
// userStore.userInfo = {}
router.push('/login')
}
return Promise.reject(e)
})
export default httpInstance// 响应拦截器
let isToken=false
request.interceptors.response.use((res)=>{
// 没错误返回200 错误·拦截
if (res.data.code ===200) {
return res;
}else if (res.data.code === 404){
router.push('/login')
}else if(res.data.code === 10020){
// 防止失效导致出现多个提示框的解决办法
if(!isToken){
isToken=true
window.localStorage.removeItem('user')
router.push('/login')
setTimeout(()=>{
isToken=false
},2000)
return Message.warning(res.data.message)&&Promise.reject(res.data.message);
}
}
},)
以上为个人经验，希望对您有所帮助。