Game-Backstage-Management-System/src/utils/axios/axiosInstance.ts

/*
 * @Author: fxs bjnsfxs@163.com
 * @Date: 2024-08-20 17:18:52
 * @LastEditors: fxs bjnsfxs@163.com
 * @LastEditTime: 2024-10-15 11:53:42
 * @FilePath: \Game-Backstage-Management-System\src\utils\axios\axiosInstance.ts
 * @Description:
 *
 */
// 引入axios

import { ElMessage } from 'element-plus'
import { useRequest } from '@/hooks/useRequest'
import { MessageType } from '@/types/res'
import { getToken, refreshToken, setToken, removeAllToeken } from '../token/token'
import { setLoginState } from '../localStorage/localStorage'

import axios from 'axios'
import router from '@/router'

const { baseURL } = useRequest()

const errorCodeMsg: {
  [key: number]: string
} = {
  422: '请求缺少参数，请检查后重试'
}

// 创建axios实例
const axiosInstance = axios.create({
  baseURL,
  headers: {
    Authorization: `${getToken()}`
  }
})

let isRefreshing = false // 是否正在刷新token
let requestQueue: any[] = [] // 存储请求队列

/**
 * @description: 未登录的情况下展示的信息
 * @param {*} ElMessage
 * @return {*}
 */
const showUnloginInfo = (msg: string = '请先登录') => {
  ElMessage({
    type: MessageType.Warning,
    message: msg,
    duration: 1500
  })
  removeAllToeken()
  setLoginState(false)
  router.push('/login')
}

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  async function (response) {
    const { code } = response.data

    // -2是token为空的情况
    if (code === -2) {
      showUnloginInfo()
    }
    // -1是token过期的情况
    if (code === -1) {
      const config = response.config // 保存一下这一次的请求，等token刷新成功之后重新请求

      if (!isRefreshing) {
        isRefreshing = true
        return await refreshToken()
          .then((res) => {
            if (res.data.code === 0) {
              const token = JSON.parse(JSON.stringify(res.data.data.token))
              setToken(token)
              config.headers.Authorization = token // 将本次请求的token替换成新的token
              requestQueue.forEach((cb) => cb(token)) // 将队列中的请求重新发起
              requestQueue = []
              return axiosInstance(config)
            } else {
              showUnloginInfo('登录已过期，请重新登陆')
            }
          })
          .catch((err) => {
            console.log(err)
            showUnloginInfo('登录已过期，请重新登陆')
          })
          .finally(() => {
            isRefreshing = false
          })
      } else {
        // 如果正在刷新token，将本次请求加入队列，等token刷新成功之后重新发起请求
        return new Promise((resolve) => {
          requestQueue.push((token: string) => {
            config.headers.Authorization = token
            resolve(axiosInstance(config))
          })
        })
      }
    }
    return response.data
  },
  function (error) {
    let code = error.response.data.code
    let msg = errorCodeMsg[code] ?? '服务器错误，请稍后再试'

    // 对响应错误做点什么
    ElMessage({
      type: MessageType.Error,
      message: msg,
      duration: 1500
    })
    // console.log(error)
    // setLoginState(false)
    // router.push('/login')
    return Promise.reject(error)
  }
)
// 导出实例
export default axiosInstance