refactor: vue3 axios api ...

yudao-ui-admin-vue3/src/config/axios/index.ts

@@ -1,280 +1,148 @@
-// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
-// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import qs from 'qs'
+import { config } from '@/config/axios/config'
+import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth'
+import errorCode from './errorCode'
 
-import type { AxiosResponse } from 'axios'
-import type { RequestOptions, RequestResult } from 'types/axios'
-import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'
-import { VAxios } from './Axios'
-import { checkStatus } from './checkStatus'
-import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/http.enum'
-import { useCache } from '@/hooks/web/useCache'
-import { isString } from '@/utils/is'
-import { getAccessToken, setToken } from '@/utils/auth'
-import { setObjToUrlParams, deepMerge } from './utils'
-import { useI18n } from '@/hooks/web/useI18n'
-import { joinTimestamp, formatRequestDate } from './helper'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { refreshToken } from '@/api/login'
-
-const { t } = useI18n()
-const { wsCache } = useCache()
 const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
 const BASE_URL = import.meta.env.VITE_BASE_URL
 const BASE_API = import.meta.env.VITE_API_URL
-const apiUrl = BASE_URL + BASE_API
+const { result_code, base_url } = config
+
+// 需要忽略的提示。忽略后，自动 Promise.reject('error')
+const ignoreMsgs = [
+  '无效的刷新令牌', // 刷新令牌被删除时，不用提示
+  '刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
+]
 // 是否显示重新登录
-// export let isRelogin = { show: false }
-// TODO 请求队列
-// let requestList = []
+export const isRelogin = { show: false }
+// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
 // 是否正在刷新中
 let isRefreshToken = false
-/**
- * @description: 数据处理，方便区分多种处理方式
- */
-const transform: AxiosTransform = {
-  /**
-   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
-   */
-  transformRequestHook: async (res: AxiosResponse<RequestResult>, options: RequestOptions) => {
-    const { isTransformResponse, isReturnNativeResponse } = options
-    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
-    if (isReturnNativeResponse) {
-      return res
-    }
-    // 不进行任何处理，直接返回
-    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
-    if (!isTransformResponse) {
-      return res.data
-    }
-    // 错误的时候返回
+export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
 
-    const { data } = res
-    if (!data) {
-      // 返回“[HTTP]请求没有返回值”;
-      throw new Error(t('sys.api.apiRequestFailed'))
-    }
-    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, msg } = data
-    const result = data.data
-    // TODO 芋艿：文件下载，需要特殊处理
-    if (code === undefined) {
-      console.log(res)
-      return res.data
-    }
+// 创建axios实例
+const service: AxiosInstance = axios.create({
+  baseURL: BASE_URL + BASE_API, // api 的 base_url
+  timeout: config.request_timeout // 请求超时时间
+})
 
-    // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
-    if (hasSuccess) {
-      return result
-    }
-
-    // 在此处根据自己项目的实际情况对不同的code执行不同的操作
-    // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
-    let timeoutMsg = ''
-    switch (code) {
-      case ResultEnum.TIMEOUT:
-        // TODO 未完成
-        // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
-        if (!isRefreshToken) {
-          isRefreshToken = true
-          const refreshTokenRes = await refreshToken()
-          // 1. 如果获取不到刷新令牌，则只能执行登出操作
-          if (!refreshTokenRes) {
-            timeoutMsg = t('sys.api.timeoutMessage')
-            wsCache.clear() // 清除浏览器全部临时缓存
-            ElMessageBox.confirm(timeoutMsg, {
-              confirmButtonText: t('login.relogin'),
-              cancelButtonText: t('common.cancel'),
-              type: 'warning'
-            })
-              .then(() => {})
-              .catch(() => {})
-            break
-          } else {
-            // 2. 进行刷新访问令牌
-            // 2.1 刷新成功，则回放队列的请求 + 当前请求
-            setToken(refreshTokenRes.data)
-          }
-        }
-      default:
-        if (msg) {
-          timeoutMsg = msg
-        }
-    }
-
-    // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
-    // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
-    if (options.errorMessageMode === 'modal') {
-      await ElMessageBox.confirm(timeoutMsg, {
-        type: 'error'
-      })
-    } else if (options.errorMessageMode === 'message') {
-      ElMessage.error(timeoutMsg)
-    }
-
-    throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))
-  },
-
-  // 请求之前处理config
-  beforeRequestHook: (config, options) => {
-    const { apiUrl, joinParamsToUrl, formatDate, joinTime = true } = options
-
-    if (apiUrl && isString(apiUrl)) {
-      config.url = `${apiUrl}${config.url}`
-    }
-    const params = config.params || {}
-    const data = config.data || false
-    formatDate && data && !isString(data) && formatRequestDate(data)
-    if (config.method?.toUpperCase() === RequestEnum.GET) {
-      if (!isString(params)) {
-        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
-        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
-      } else {
-        // 兼容restful风格
-        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`
-        config.params = undefined
-      }
-    } else {
-      if (!isString(params)) {
-        formatDate && formatRequestDate(params)
-        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
-          config.data = data
-          config.params = params
-        } else {
-          // 非GET请求如果没有提供data，则将params视为data
-          config.data = params
-          config.params = undefined
-        }
-        if (joinParamsToUrl) {
-          config.url = setObjToUrlParams(
-            config.url as string,
-            Object.assign({}, config.params, config.data)
-          )
-        }
-      } else {
-        // 兼容restful风格
-        config.url = config.url + params
-        config.params = undefined
-      }
-    }
-    return config
-  },
-
-  /**
-   * @description: 请求拦截器处理
-   */
-  requestInterceptors: (config, options) => {
-    // 请求之前处理config
-    const token = getAccessToken()
-    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
-      // jwt token
-      ;(config as Recordable).headers.Authorization = options.authenticationScheme
-        ? `${options.authenticationScheme} ${token}`
-        : token
+// request拦截器
+service.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    // 是否需要设置 token
+    const isToken = (config!.headers || {}).isToken === false
+    if (getAccessToken() && !isToken) {
+      ;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
     }
     // 设置租户
     if (tenantEnable) {
-      const tenantId = wsCache.get('tenantId')
+      const tenantId = getTenantId()
       if (tenantId) (config as Recordable).headers.common['tenant-id'] = tenantId
     }
+    if (
+      config.method === 'post' &&
+      config!.headers!['Content-Type'] === 'application/x-www-form-urlencoded'
+    ) {
+      config.data = qs.stringify(config.data)
+    }
+    // get参数编码
+    if (config.method === 'get' && config.params) {
+      let url = config.url as string
+      url += '?'
+      const keys = Object.keys(config.params)
+      for (const key of keys) {
+        if (config.params[key] !== void 0 && config.params[key] !== null) {
+          url += `${key}=${encodeURIComponent(config.params[key])}&`
+        }
+      }
+      // 给 get 请求加上时间戳参数，避免从缓存中拿数据
+      // const now = new Date().getTime()
+      // url = url.substring(0, url.length - 1) + `?_t=${now}`
+      config.params = {}
+      config.url = url
+    }
     return config
   },
+  (error: AxiosError) => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+  }
+)
 
-  /**
-   * @description: 响应拦截器处理
-   */
-  responseInterceptors: (res: AxiosResponse<any>) => {
-    return res
-  },
-
-  /**
-   * @description: 响应错误处理
-   */
-  responseInterceptorsCatch: (error: any) => {
-    const { response, code, message, config } = error || {}
-    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
-    const msg: string = response?.data?.msg ?? ''
-    const err: string = error?.toString?.() ?? ''
-    let errMessage = ''
-
-    try {
-      if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
-        errMessage = t('sys.api.apiTimeoutMessage')
-      }
-      if (err?.includes('Network Error')) {
-        errMessage = t('sys.api.networkExceptionMsg')
-      }
-
-      if (errMessage) {
-        if (errorMessageMode === 'modal') {
-          ElMessageBox.confirm(errMessage, {
-            type: 'error'
-          })
-        } else if (errorMessageMode === 'message') {
-          ElMessage.error(errMessage)
-        }
-        return Promise.reject(error)
-      }
-    } catch (error) {
-      throw new Error(error as unknown as string)
+// response 拦截器
+service.interceptors.response.use(
+  async (response: AxiosResponse<Recordable>) => {
+    const { data } = response
+    if (!data) {
+      // 返回“[HTTP]请求没有返回值”;
+      throw new Error()
     }
-
-    checkStatus(error?.response?.status, msg, errorMessageMode)
+    // 未设置状态码则默认成功状态
+    const code = data.code || result_code
+    // 获取错误信息
+    const msg = data.msg || errorCode[code] || errorCode['default']
+    if (ignoreMsgs.indexOf(msg) !== -1) {
+      // 如果是忽略的错误码，直接返回 msg 异常
+      return Promise.reject(msg)
+    } else if (code === 401) {
+      // 如果未认证，并且未进行刷新令牌，说明可能是访问令牌过期了
+      if (!isRefreshToken) {
+        isRefreshToken = true
+        // 1. 如果获取不到刷新令牌，则只能执行登出操作
+        if (!getRefreshToken()) {
+          return handleAuthorized()
+        }
+      }
+    } else if (code === 500) {
+      ElMessage.error(msg)
+      return Promise.reject(new Error(msg))
+    } else if (code === 901) {
+      ElMessage.error(
+        '<div>演示模式，无法进行写操作</div>' +
+          '<div> &nbsp; </div>' +
+          '<div>参考 https://doc.iocoder.cn/ 教程</div>' +
+          '<div> &nbsp; </div>' +
+          '<div>5 分钟搭建本地环境</div>'
+      )
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      if (msg === '无效的刷新令牌') {
+        // hard coding：忽略这个提示，直接登出
+        console.log(msg)
+      } else {
+        ElNotification.error({
+          title: msg
+        })
+      }
+      return Promise.reject('error')
+    } else {
+      return data
+    }
+  },
+  (error: AxiosError) => {
+    console.log('err' + error) // for debug
+    ElMessage.error(error.message)
     return Promise.reject(error)
   }
+)
+function handleAuthorized() {
+  if (!isRelogin.show) {
+    isRelogin.show = true
+    ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+      confirmButtonText: '重新登录',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(() => {
+        isRelogin.show = false
+      })
+      .catch(() => {
+        isRelogin.show = false
+      })
+  }
+  return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
 }
-
-function createAxios(opt?: Partial<CreateAxiosOptions>) {
-  return new VAxios(
-    deepMerge(
-      {
-        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
-        // authentication schemes，e.g: Bearer
-        // authenticationScheme: 'Bearer',
-        authenticationScheme: 'Bearer',
-        timeout: 10 * 1000,
-        // 基础接口地址
-        // baseURL: globSetting.apiUrl,
-
-        headers: { 'Content-Type': ContentTypeEnum.JSON },
-        // 如果是form-data格式
-        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
-        // 数据处理方式
-        transform,
-        // 配置项，下面的选项都可以在独立的接口请求中覆盖
-        requestOptions: {
-          // 默认将prefix 添加到url
-          joinPrefix: true,
-          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
-          isReturnNativeResponse: false,
-          // 需要对返回数据进行处理
-          isTransformResponse: true,
-          // post请求的时候添加参数到url
-          joinParamsToUrl: false,
-          // 格式化提交参数时间
-          formatDate: true,
-          // 消息提示类型
-          errorMessageMode: 'message',
-          // 接口地址
-          apiUrl: apiUrl,
-          //  是否加入时间戳
-          joinTime: true,
-          // 忽略重复请求
-          ignoreCancelToken: true,
-          // 是否携带token
-          withToken: true
-        }
-      },
-      opt || {}
-    )
-  )
-}
-export const defHttp = createAxios()
-
-// other api url
-// export const otherHttp = createAxios({
-//   requestOptions: {
-//     apiUrl: 'xxx',
-//     urlPrefix: 'xxx',
-//   },
-// });
+export { service }