我要评论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);
}
}
},)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论