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 httpInstance

Vue 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); 
        } 
    } 
},)