perf: http

.env.development

@@ -1,8 +1,15 @@
+ENV = 'development'
 # 平台本地运行端口号
 VITE_PORT = 8848
 
+# 接口地址
+VITE_APP_BASE_API  = 'http://localhost:8888/'
+VITE_APP_WS_API = 'ws://localhost:8888'
+
 # 开发环境读取配置文件路径
 VITE_PUBLIC_PATH = /
 
 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
+# 是否启用 babel-plugin-dynamic-import-node插件
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

build/utils.ts

@@ -56,7 +56,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
     VITE_ROUTER_HISTORY: "",
     VITE_CDN: false,
     VITE_HIDE_HOME: "false",
-    VITE_COMPRESSION: "none"
+    VITE_COMPRESSION: "none",
+    VITE_APP_BASE_API: "ws://localhost:"
   };
 
   for (const envName of Object.keys(envConf)) {

src/api/utils.ts

@@ -0,0 +1,3 @@
+export const baseUrlApi = (url: string) => `/api/${url}`;
+export const baseUrlAuth = (url: string) => `/auth/${url}`;
+export const baseUrlAvatar = (url: string) => `/avatar/${url}`;

src/utils/http/ApiAbstract.ts

@@ -0,0 +1,47 @@
+export class ApiAbstract<T = any> {
+  public status: number;
+  public timestamp: Date;
+  public message: string;
+  public data: T | T[] | Page<T> | any;
+}
+
+export class Page<T> {
+  content: T[];
+  totalElements: number;
+}
+
+export class PageQuery {
+  page?: number = 0;
+  size?: number = 10;
+  sort?: string = "id,asc";
+}
+
+export class VersionEntity {
+  /**
+   * 乐观锁
+   */
+  version: number;
+}
+
+export class BaseEntity extends VersionEntity {
+  /**
+   * 创建人
+   */
+  createBy?: string;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 更新人
+   */
+  updateBy?: string;
+  /**
+   * 更新时间
+   */
+  updateTime?: Date;
+  /**
+   * 删除状态
+   */
+  deleted?: number;
+}

src/utils/http/index.ts

@@ -12,8 +12,6 @@ import type {
 import { stringify } from "qs";
 import NProgress from "../progress";
 import { getToken, formatToken } from "@/utils/auth";
-import { useUserStoreHook } from "@/store/modules/user";
-
 // 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
 const defaultConfig: AxiosRequestConfig = {
   // 请求超时时间
@@ -73,37 +71,20 @@ class PureHttp {
           return config;
         }
         /** 请求白名单，放置一些不需要token的接口（通过设置请求白名单，防止token过期后再请求造成的死循环问题） */
-        const whiteList = ["/refresh-token", "/login"];
+        const whiteList = ["/refresh-token", "/login", "/auth", "/auth/*"];
-        return whiteList.find(url => url === config.url)
+        return whiteList.find(
+          url =>
+            url === config.url ||
+            (url.endsWith("*") &&
+              config.url.startsWith(url.replace("*", "")) &&
+              config.url != "/auth/logout")
+        )
           ? config
           : new Promise(resolve => {
               const data = getToken();
               if (data) {
-                const now = new Date().getTime();
+                config.headers["Authorization"] = formatToken(data.accessToken);
-                const expired = parseInt(data.expires) - now <= 0;
+                resolve(config);
-                if (expired) {
-                  if (!PureHttp.isRefreshing) {
-                    PureHttp.isRefreshing = true;
-                    // token过期刷新
-                    useUserStoreHook()
-                      .handRefreshToken({ refreshToken: data.refreshToken })
-                      .then(res => {
-                        const token = res.data.accessToken;
-                        config.headers["Authorization"] = formatToken(token);
-                        PureHttp.requests.forEach(cb => cb(token));
-                        PureHttp.requests = [];
-                      })
-                      .finally(() => {
-                        PureHttp.isRefreshing = false;
-                      });
-                  }
-                  resolve(PureHttp.retryOriginalRequest(config));
-                } else {
-                  config.headers["Authorization"] = formatToken(
-                    data.accessToken
-                  );
-                  resolve(config);
-                }
               } else {
                 resolve(config);
               }

types/global.d.ts

@@ -61,6 +61,7 @@ declare global {
     VITE_CDN: boolean;
     VITE_HIDE_HOME: string;
     VITE_COMPRESSION: ViteCompression;
+    VITE_APP_BASE_API: string;
   }
 
   /**

vite.config.ts

@@ -10,8 +10,13 @@ import {
 } from "./build/utils";
 
 export default ({ mode }: ConfigEnv): UserConfigExport => {
-  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
+  const {
-    warpperEnv(loadEnv(mode, root));
+    VITE_CDN,
+    VITE_PORT,
+    VITE_COMPRESSION,
+    VITE_PUBLIC_PATH,
+    VITE_APP_BASE_API
+  } = warpperEnv(loadEnv(mode, root));
   return {
     base: VITE_PUBLIC_PATH,
     root,
@@ -24,7 +29,26 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       port: VITE_PORT,
       host: "0.0.0.0",
       // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
-      proxy: {},
+      proxy: {
+        "/api": {
+          // 这里填写后端地址
+          target: VITE_APP_BASE_API + "api",
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, "")
+        },
+        "/auth": {
+          // 这里填写后端地址
+          target: VITE_APP_BASE_API + "auth",
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/auth/, "")
+        },
+        "/avatar": {
+          // 这里填写后端地址
+          target: VITE_APP_BASE_API + "avatar",
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/avatar/, "")
+        }
+      },
       // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
       warmup: {
         clientFiles: ["./index.html", "./src/{views,components}/*"]