1

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.13.6",
     "echarts": "^6.0.0",
     "element-plus": "^2.13.5",
     "vue": "^3.5.29",

src/api/index.js

@@ -0,0 +1,5 @@
+import {request} from '@/utils/http'
+
+export default {
+  getPageData: type => request.get(`/api/page/json/${type}`),
+}

src/utils/http/helpers.js

@@ -0,0 +1,58 @@
+import { useAuthStore } from '@/store'
+
+let isConfirming = false
+export function resolveResError(code, message, needTip = true) {
+  switch (code) {
+    case 401:
+      if (isConfirming || !needTip)
+        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 || !needTip)
+        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
+  }
+  needTip && window.$message?.error(message)
+  return message
+}

src/utils/http/index.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+import { setupInterceptors } from './interceptors'
+
+export function createAxios(options = {}) {
+  const defaultOptions = {
+    baseURL: '/dev-api',
+    timeout: 12000,
+  }
+  const service = axios.create({
+    ...defaultOptions,
+    ...options,
+  })
+  setupInterceptors(service)
+  return service
+}
+
+export const request = createAxios()

src/utils/http/interceptors.js

@@ -0,0 +1,61 @@
+import { useAuthStore } from '@/store'
+import { resolveResError } from './helpers'
+
+export function setupInterceptors(axiosInstance) {
+  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
+
+      const needTip = config?.needTip !== false
+
+      // 根据code处理对应的操作，并返回处理后的message
+      const message = resolveResError(code, data?.message ?? statusText, needTip)
+
+      return Promise.reject({ code, message, error: data ?? response })
+    }
+    return Promise.resolve(data ?? response)
+  }
+
+  axiosInstance.interceptors.request.use(reqResolve, reqReject)
+  axiosInstance.interceptors.response.use(resResolve, resReject)
+}
+
+function reqResolve(config) {
+  // 处理不需要token的请求
+  if (config.needToken === false) {
+    return config
+  }
+
+  const { accessToken } = useAuthStore()
+  if (accessToken) {
+    // token: Bearer + xxx
+    config.headers.Authorization = `Bearer ${accessToken}`
+  }
+
+  return config
+}
+
+function reqReject(error) {
+  return Promise.reject(error)
+}
+
+async function resReject(error) {
+  if (!error || !error.response) {
+    const code = error?.code
+    /** 根据code处理对应的操作，并返回处理后的message */
+    const message = resolveResError(code, error.message)
+    return Promise.reject({ code, message, error })
+  }
+
+  const { data, status, config } = error.response
+  const code = data?.code ?? status
+
+  const needTip = config?.needTip !== false
+  const message = resolveResError(code, data?.message ?? error.message, needTip)
+  return Promise.reject({ code, message, error: error.response?.data || error.response })
+}

vite.config.js

@@ -1,14 +1,11 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
 
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
-  server: {
-    host: true,  // 允许通过 IP 地址访问
-  },
   plugins: [
     vue(),
     // vueDevTools(),
@@ -18,4 +15,24 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    host: '0.0.0.0',
+    port: 9527,
+    open: true,
+    proxy: {
+      '/dev-api': {
+        target: 'http://172.16.1.162:41208',
+        changeOrigin: true,
+        secure: false,
+        ws: true,
+        rewrite: path => path.replace(/^\/dev-api/, ''),
+        configure: (proxy, options) => {
+          // 配置此项可在响应头中看到请求的真实地址
+          proxy.on('proxyRes', (proxyRes, req) => {
+            proxyRes.headers['x-real-url'] = new URL(req.url || '', options.target)?.href || ''
+          })
+        },
+      },
+    },
+  },
 })