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