first commit

src/utils/http/help.js

@@ -0,0 +1,13 @@
+import { useUserStore } from '@/store/modules/user'
+
+const WITHOUT_TOKEN_API = [{ url: '/auth/login', method: 'POST' }]
+
+export function isWithoutToken({ url, method = '' }) {
+  return WITHOUT_TOKEN_API.some((item) => item.url === url && item.method === method.toUpperCase())
+}
+
+export function addBaseParams(params) {
+  if (!params.userId) {
+    params.userId = useUserStore().userId
+  }
+}

src/utils/http/index.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+import { setupInterceptor } from './interceptors'
+
+function createAxios(option = {}) {
+  const defBaseURL = window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API
+  const service = axios.create({
+    timeout: option.timeout || 120000,
+    baseURL: option.baseURL || defBaseURL,
+  })
+  setupInterceptor(service)
+  return service
+}
+
+export const defAxios = createAxios()
+
+export const mockAxios = createAxios({
+  baseURL: window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API_TEST || import.meta.env.VITE_APP_GLOB_BASE_API_TEST,
+})

src/utils/http/interceptors.js

@@ -0,0 +1,82 @@
+import { router } from '@/router'
+import { getToken, removeToken } from '@/utils/token'
+import { isWithoutToken } from './help'
+
+export function setupInterceptor(service) {
+  service.interceptors.request.use(
+    async (config) => {
+      // 防止缓存，给get请求加上时间戳
+      if (config.method === 'get') {
+        config.params = { ...config.params, t: new Date().getTime() }
+      }
+
+      // 处理不需要token的请求
+      if (isWithoutToken(config)) {
+        return config
+      }
+
+      const token = getToken()
+      if (token) {
+        /**
+         * * jwt token
+         * ! 认证方案: Bearer
+         */
+        config.headers.Authorization = 'Bearer ' + token
+
+        return config
+      }
+      /**
+       * * 未登录或者token过期的情况下
+       * * 跳转登录页重新登录，携带当前路由及参数，登录成功会回到原来的页面
+       */
+      const { currentRoute } = router
+      router.replace({
+        path: '/login',
+        query: { ...currentRoute.query, redirect: currentRoute.path },
+      })
+      return Promise.reject({ code: '-1', message: '未登录' })
+    },
+    (error) => Promise.reject(error)
+  )
+
+  service.interceptors.response.use(
+    (response) => response?.data,
+    (error) => {
+      let { code, message } = error.response?.data
+      return Promise.reject({ code, message })
+
+      /**
+       * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理
+       */
+      switch (code) {
+        case 401:
+          // 未登录（可能是token过期或者无效了）
+          console.error(message)
+          removeToken()
+          const { currentRoute } = router
+          router.replace({
+            path: '/login',
+            query: { ...currentRoute.query, redirect: currentRoute.path },
+          })
+          break
+        case 403:
+          // 没有权限
+          console.error(message)
+          break
+        case 404:
+          // 资源不存在
+          console.error(message)
+          break
+        default:
+          break
+      }
+      // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好）
+      if ([401, 403, 404].includes(code) || code >= 9000) {
+        return Promise.resolve({ code, message })
+      } else {
+        console.error('【err】' + error)
+        return Promise.reject({ message: '接口异常，请稍后重试！' })
+      }
+    }
+  )
+}