token失效与401处理

在axios配置的文件里

// axios的基础封装
import axios from 'axios'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import router from '@/router' //vue3组件外用这个，组件内用useRouter

const httpAxios = axios.create({
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout: 5000,
  });
// 添加响应拦截器
// 用户登录
httpAxios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 统一错误提示
    ElMessage({
      type: 'warning',
      message: error.response.data.message
    })

    // 401token过期错误处理
    // 清除本地用户数据 
    // 跳转登录页
    
    const userStore = useUserStore() // 获取仓库函数
    if(error.response.status == 401){
        // 清除用户信息 触发action
        userStore.clearUserInfo() 
        // 用户退出后跳转登录页
        router.push('/login')
    }

    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default httpAxios