init

src/utils/http/helpers.js

@@ -0,0 +1,64 @@
+/**********************************
+ * @FilePath: helpers.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:22
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { useAuthStore } from '@/store'
+
+let isConfirming = false
+export function resolveResError(code, message) {
+  switch (code) {
+    case 401:
+      if (isConfirming) return
+      isConfirming = true
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: '登录已过期，是否重新登录？',
+        confirm() {
+          useAuthStore().logout()
+          window.$message?.success('已退出登录')
+          isConfirming = false
+        },
+        cancel() {
+          isConfirming = false
+        },
+      })
+      return false
+    case 11007:
+    case 11008:
+      if (isConfirming) return
+      isConfirming = true
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: `${message}，是否重新登录？`,
+        confirm() {
+          useAuthStore().logout()
+          window.$message?.success('已退出登录')
+          isConfirming = false
+        },
+        cancel() {
+          isConfirming = false
+        },
+      })
+      return false
+    case 403:
+      message = '请求被拒绝'
+      break
+    case 404:
+      message = '请求资源或接口不存在'
+      break
+    case 500:
+      message = '服务器发生异常'
+      break
+    default:
+      message = message ?? `【${code}】: 未知异常!`
+      break
+  }
+  return message
+}

src/utils/http/index.js

@@ -0,0 +1,30 @@
+/**********************************
+ * @FilePath: index.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:28
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import axios from 'axios'
+import { setupInterceptors } from './interceptors'
+
+export function createAxios(options = {}) {
+  const defaultOptions = {
+    baseURL: '/api',
+    timeout: 12000,
+  }
+  const service = axios.create({
+    ...defaultOptions,
+    ...options,
+  })
+  setupInterceptors(service)
+  return service
+}
+
+export const request = createAxios()
+
+export const mockRequest = createAxios({
+  baseURL: '/mock-api',
+})

src/utils/http/interceptors.js

@@ -0,0 +1,72 @@
+/**********************************
+ * @FilePath: interceptors.js
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/04 22:46:40
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { resolveResError } from './helpers'
+import { useAuthStore } from '@/store'
+
+export function setupInterceptors(axiosInstance) {
+  function reqResolve(config) {
+    // 处理不需要token的请求
+    if (config.noNeedToken) {
+      return config
+    }
+
+    const { accessToken } = useAuthStore()
+    if (accessToken) {
+      // token: Bearer + xxx
+      config.headers.Authorization = 'Bearer ' + accessToken
+    }
+
+    return config
+  }
+
+  function reqReject(error) {
+    return Promise.reject(error)
+  }
+
+  const SUCCESS_CODES = [0, 200]
+  function resResolve(response) {
+    const { data, status, config, statusText, headers } = response
+    if (headers['content-type']?.includes('json')) {
+      if (SUCCESS_CODES.includes(data?.code)) {
+        return Promise.resolve(data)
+      }
+      const code = data?.code ?? status
+
+      // 根据code处理对应的操作，并返回处理后的message
+      const message = resolveResError(code, data?.message ?? statusText)
+
+      //需要错误提醒
+      !config.noNeedTip && window.$message?.error(message)
+      return Promise.reject({ code, message, error: data ?? response })
+    }
+    return Promise.resolve(data ?? response)
+  }
+
+  async function resReject(error) {
+    if (!error || !error.response) {
+      const code = error?.code
+      /** 根据code处理对应的操作，并返回处理后的message */
+      const message = resolveResError(code, error.message)
+      window.$message?.error(message)
+      return Promise.reject({ code, message, error })
+    }
+
+    const { data, status, config } = error.response
+    const code = data?.code ?? status
+
+    const message = resolveResError(code, data?.message ?? error.message)
+    /** 需要错误提醒 */
+    !config?.noNeedTip && message && window.$message?.error(message)
+    return Promise.reject({ code, message, error: error.response?.data || error.response })
+  }
+
+  axiosInstance.interceptors.request.use(reqResolve, reqReject)
+  axiosInstance.interceptors.response.use(resResolve, resReject)
+}