feat(service): 添加自定义请求模块并优化认证逻辑

- 新增 request 目录，实现自定义请求类和拦截器
- 添加全局状态管理，用于存储认证信息
- 优化 token 刷新逻辑，提高请求安全性
- 移除不必要的 console.log 语句- 更新项目依赖，添加 axios库

app/pages/home/index.vue

@@ -5,6 +5,8 @@ import itemDetail from '@/components/itemDetail/index.vue';
 import {homeStore} from "@/stores/home/index.js";
 import Column from './components/Column/index.vue'
 const {fullLive} = homeStore();
+import { useFetch } from '#app'
+
 definePageMeta({
   layout: 'default',
   i18n: 'menu.home',

app/pages/realAuth/index.vue

@@ -25,7 +25,6 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
   showPicker.value = false
 }
 const onBirthdayConfirm = (value) => {
-  console.log(value)
   birthdayDate.value = value.selectedValues
   birthday.value = value.selectedValues.join('-')
   showBirthdayPicker.value = false

app/service/index.js

@@ -0,0 +1,107 @@
+// 导入必要的模块和函数
+import { useRouter } from "vue-router"; // 用于路由导航
+import Request from "@/service/request/index.js"; // 自定义请求类
+import { message } from '@/components/x-message/useMessage.js';
+import {authStore} from "~/stores/auth/index.js"; // 消息提示组件
+
+// 初始化路由
+const router = useRouter();
+let isRefreshing = false; // 标记是否正在刷新token
+let refreshSubscribers = []; // 存储刷新token的回调函数
+const config = useRuntimeConfig(); // 获取运行时配置
+
+// 创建请求实例
+const request = new Request({
+  baseURL: config.public.NUXT_PUBLIC_API_BASE, // 基础URL
+  timeout: 1000 * 60 * 5, // 超时时间设置为5分钟
+  showMsg: true, // 是否显示消息提示
+  interceptors: {
+    // 请求拦截器
+    requestInterceptors: (config) => {
+      // 根据是否是表单数据设置Content-Type
+      const contentType = config.isFormData ? 'multipart/form-data' : config.contentType || 'application/json';
+      config.headers = {
+        "Content-Type": contentType,
+        "Authorization": localStorage.getItem('token') || '' // 从本地存储获取token
+      };
+      return config; // 返回修改后的配置
+    },
+    // 响应拦截器
+    responseInterceptors: async (response) => {
+      // 如果需要显示消息且状态为1，显示警告消息
+      if (response.config.showMsg && response.data.status === 1) {
+        message.warning(response.data.msg);
+      }
+      // 如果响应码为401，尝试刷新token
+      if (response.data.code === 401) {
+        return getRefreshToken(response);
+      }
+      // 如果响应状态为200, 201, 204，直接返回响应
+      if ([200, 201, 204].includes(response.status)) {
+        return response.config.responseType === "blob" ? response : response;
+      } else {
+        // 处理其他错误情况
+        const errorMsg = response.data.msg || 'An error occurred.';
+        message.error(errorMsg);
+        return Promise.reject(new Error(errorMsg));
+      }
+    },
+  },
+});
+
+// 刷新token的函数
+async function getRefreshToken(response) {
+ const {token,RefreshToken,userInfo}=  authStore()
+  if (!isRefreshing) {
+    isRefreshing = true; // 标记正在刷新
+    const refreshToken = RefreshToken.value; // 获取刷新token
+    if (refreshToken) {
+      try {
+        // 发送请求刷新token
+        const res = await request.post("/user/refresh/token", { refreshToken });
+        if (res.code === 200) {
+          // 更新本地存储的token和用户信息
+          token.value = res.data.Token;
+          userInfo.value=res.data.AccountInfo
+          RefreshToken.value = res.data.RefreshToken;
+          response.config.headers["Authorization"] = res.data.Token; // 更新请求头的token
+          return request.request(response.config); // 重新发送原始请求
+        } else {
+          handleAuthError(res); // 处理认证错误
+        }
+      } catch (error) {
+        throw error; // 抛出错误
+      } finally {
+        isRefreshing = false; // 重置刷新标记
+        refreshSubscribers.forEach(callback => callback()); // 执行所有等待的回调
+        refreshSubscribers = []; // 清空回调列表
+      }
+    } else {
+      handleAuthError(); // 没有刷新token时处理错误
+    }
+  } else {
+    // 如果正在刷新，返回一个Promise，等待刷新完成后重新发送请求
+    return new Promise(resolve => {
+      refreshSubscribers.push(() => resolve(request.request(response.config)));
+    });
+  }
+}
+
+// 处理认证错误的函数
+function handleAuthError(res = {}) {
+  router.push("/login"); // 跳转到登录页面
+  const errorMsg = res.message || res.msg || "No refresh token available."; // 错误消息
+  message.error(errorMsg); // 显示错误消息
+  throw new Error(errorMsg); // 抛出错误
+}
+
+// 发送请求的函数
+const fontRequest = (config) => {
+  // 如果是GET请求，将data作为params
+  if (["get", "GET"].includes(config.method)) {
+    config.params = config.data;
+  }
+  return request.request(config); // 发送请求
+};
+
+export default fontRequest; // 导出请求函数

app/service/request/index.js

@@ -0,0 +1,84 @@
+import axios from 'axios'; // 导入axios库
+
+// 自定义请求类
+class Request {
+  constructor(config) {
+    this.instance = axios.create(config); // 创建axios实例
+    this.abortControllerMap = new Map(); // 存储请求的AbortController
+    this.interceptorsObj = config.interceptors; // 存储拦截器对象
+
+    // 默认请求拦截器
+    this.instance.interceptors.request.use(
+      (res) => {
+        const controller = new AbortController(); // 创建新的AbortController
+        const url = res.url || ''; // 获取请求的URL
+        res.signal = controller.signal; // 将信号绑定到请求
+        this.abortControllerMap.set(url, controller); // 存储控制器
+        return res; // 返回请求配置
+      },
+      (err) => Promise.reject(err) // 处理请求错误
+    );
+
+    // 自定义请求拦截器
+    this.instance.interceptors.request.use(
+      this.interceptorsObj?.requestInterceptors,
+      this.interceptorsObj?.requestInterceptorsCatch
+    );
+
+    // 自定义响应拦截器
+    this.instance.interceptors.response.use(
+      this.interceptorsObj?.responseInterceptors,
+      this.interceptorsObj?.responseInterceptorsCatch
+    );
+
+    // 默认响应拦截器
+    this.instance.interceptors.response.use(
+      (res) => {
+        const url = res.config.url || ''; // 获取响应的URL
+        this.abortControllerMap.delete(url); // 删除已完成请求的控制器
+        return res.data; // 返回响应数据
+      },
+      (err) => Promise.reject(err) // 处理响应错误
+    );
+  }
+
+  // 发送请求的方法
+  request(config) {
+    return new Promise((resolve, reject) => {
+      // 如果有自定义请求拦截器，先执行
+      if (config.interceptors?.requestInterceptors) {
+        config = config.interceptors.requestInterceptors(config);
+      }
+      // 发送请求
+      this.instance
+        .request(config)
+        .then((res) => {
+          // 如果有自定义响应拦截器，先执行
+          if (config.interceptors?.responseInterceptors) {
+            res = config.interceptors.responseInterceptors(res);
+          }
+          resolve(res); // 解析响应
+        })
+        .catch(reject); // 捕获错误
+    });
+  }
+
+  // 取消所有请求的方法
+  cancelAllRequest() {
+    for (const [, controller] of this.abortControllerMap) {
+      controller.abort(); // 取消请求
+    }
+    this.abortControllerMap.clear(); // 清空控制器映射
+  }
+
+  // 取消特定请求的方法
+  cancelRequest(url) {
+    const urlList = Array.isArray(url) ? url : [url]; // 确保url是数组
+    for (const _url of urlList) {
+      this.abortControllerMap.get(_url)?.abort(); // 取消请求
+      this.abortControllerMap.delete(_url); // 删除控制器
+    }
+  }
+}
+
+export default Request; // 导出自定义请求类

app/stores/auth/index.js

@@ -0,0 +1,11 @@
+import { createGlobalState,useLocalStorage } from '@vueuse/core'
+export const authStore = createGlobalState(() => {
+    const token=useLocalStorage('token','')
+    const RefreshToken=useLocalStorage('RefreshToken','')
+    const userInfo=useLocalStorage('userInfo','')
+    return{
+        userInfo,
+        RefreshToken,
+        token
+    }
+})

nuxt.config.js

@@ -4,7 +4,6 @@ import preload from './app/utils/preload'
 import { currentLocales } from './i18n/i18n'
 const envFile = process.env.ENV_FILE || '.env.test'
 dotenv.config({ path: `./env/${envFile}` })
-console.log('process.env',process.env)
 const publicConfig = Object.entries(process.env)
   .filter(([key]) => key.startsWith('NUXT_PUBLIC_'))
   .reduce((config, [key, value]) => {

package.json

@@ -21,6 +21,7 @@
     "@nuxtjs/i18n": "^9.1.1",
     "@vueuse/core": "^12.4.0",
     "aliyun-aliplayer": "^2.28.5",
+    "axios": "^1.7.9",
     "dotenv": "^16.4.7",
     "nuxt": "^3.15.0",
     "pinyin": "4.0.0-alpha.2",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       aliyun-aliplayer:
         specifier: ^2.28.5
         version: 2.28.5
+      axios:
+        specifier: ^1.7.9
+        version: 1.7.9
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
@@ -1663,6 +1666,9 @@ packages:
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1670,6 +1676,9 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axios@1.7.9:
+    resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
+
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
@@ -1822,6 +1831,10 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@1.1.1:
     resolution: {integrity: sha512-71Rod2AhcH3JhkBikVpNd0pA+fWsmAaVoti6OR38T76chA7vE3pSerS0Jor4wDw+tOueD2zLVvFOw5H0Rcj7rA==}
     engines: {node: '>= 0.6.x'}
@@ -2028,6 +2041,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
@@ -2304,10 +2321,23 @@ packages:
   flatted@3.3.2:
     resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   foreground-child@3.3.0:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
+  form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+    engines: {node: '>= 6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -3337,6 +3367,9 @@ packages:
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6005,6 +6038,8 @@ snapshots:
 
   async@3.2.6: {}
 
+  asynckit@0.4.0: {}
+
   autoprefixer@10.4.20(postcss@8.4.49):
     dependencies:
       browserslist: 4.24.3
@@ -6015,6 +6050,14 @@ snapshots:
       postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
+  axios@1.7.9:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   b4a@1.6.7: {}
 
   babel-plugin-macros@2.8.0:
@@ -6187,6 +6230,10 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@1.1.1:
     dependencies:
       keypress: 0.1.0
@@ -6372,6 +6419,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   denque@2.1.0: {}
 
   depd@2.0.0: {}
@@ -6719,11 +6768,19 @@ snapshots:
 
   flatted@3.3.2: {}
 
+  follow-redirects@1.15.9: {}
+
   foreground-child@3.3.0:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data@4.0.1:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}
@@ -7870,6 +7927,8 @@ snapshots:
 
   protocols@2.0.1: {}
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}