SocialNetworks_duan/src/utils/http.js

import axios from "axios"
import cache from "./cache"
import { ElMessage } from "element-plus"
import router from "@/router"
import { useLoginStore } from "@/store/authentication/index"

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 10000,
  withCredentials: true
})

//白名单
const excludePath = new Set(["/auth/login", "/auth/refresh"])

//请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = cache.getItem("token")
    if (!excludePath.has(config.url) && token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

//响应拦截器
service.interceptors.response.use(
  async (response) => {
    const res = response.data
    const loginStore = useLoginStore()

    if (res.code == 200) {
      return res
    }

    //500会抛出该错
    if (res.code !== 401 && res.code !== 403) {
      ElMessage.error(res.message || "Error")
    }

    //res.code != 200 && res.code == 401 || res.code == 403的情况如下
    try {
      // 尝试刷新token
      const refreshed = await loginStore.loginForRefreshToken()
      if (!refreshed) {
        throw new Error("Refresh token failed")
      }
      // 刷新成功，更新请求头中的accessToken并重新发送请求
      const updateConfig = {
        ...response.config,
        headers: {
          ...response.config.headers,
          Authorization: `Bearer ${loginStore.token}`
        }
      }
      return service(updateConfig) //使用新请求头重新发送原始请求
    } catch (refreshError) {
      ElMessage({
        message: "会话已过期，请重新登录!",
        type: "error",
        duration: 5 * 1000
      })
      cache.removeItem("token")
      router.push("/login")
      return Promise.reject(refreshError)
    }
  },
  (error) => {
    ElMessage({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service