Vue3中的Token失效拦截处理方式
作者：velpro_!
这篇文章主要介绍了Vue3中的Token失效拦截处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3 Token失效拦截处理
Token的有效性可以保持一段时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报错，所以需要我们做一些处理
1. 在响应拦截器里面拦截这个错误
2. 拦截到后需要做的事：
- 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 httpInstanceVue axios 响应拦截 token失效导致出现多个提示框的
// 响应拦截器
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);
}
}
},)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。