From b231b7704376fc345312d1df08f383c6a20d02ee Mon Sep 17 00:00:00 2001
From: fangyunong <fangyunogn@ylzinfo.com>
Date: Fri, 4 Jul 2025 11:33:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0request.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                              |   1 +
 auto-imports.d.ts                 |   1 +
 src/App.vue                       |   1 +
 src/api/loginApi.ts               |   7 ++
 src/store/app.ts                  |   2 +-
 src/utils/auth.ts                 |  11 ++-
 src/utils/index.ts                |   4 ++
 src/utils/request.ts              | 113 ++++++++++++++++++++++++++++++
 src/views/login/OauthCallBack.vue |   7 +-
 src/views/login/index.vue         |   4 +-
 tsconfig.json                     |  10 +--
 vite.config.ts                    |   4 ++
 12 files changed, 152 insertions(+), 13 deletions(-)
 create mode 100644 .env
 create mode 100644 src/api/loginApi.ts
 create mode 100644 src/utils/index.ts
 create mode 100644 src/utils/request.ts

diff --git a/.env b/.env
new file mode 100644
index 0000000..7518860
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://your-api-url.com
\ No newline at end of file
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index d0c217f..319befa 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -21,6 +21,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const login: typeof import('./src/api/loginApi')['login']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
diff --git a/src/App.vue b/src/App.vue
index 9a73251..f8d4136 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,7 @@
 
 <script setup lang='ts'>
 import { type GlobalThemeOverrides, dateZhCN, zhCN } from "naive-ui";
+
 const themeOverrides: GlobalThemeOverrides = {
   // 待配置主题色
   'common': {
diff --git a/src/api/loginApi.ts b/src/api/loginApi.ts
new file mode 100644
index 0000000..e54c37a
--- /dev/null
+++ b/src/api/loginApi.ts
@@ -0,0 +1,7 @@
+import http from "@/utils/request";
+
+//demo
+export const login = () => {
+    return http.get('/get-user')
+}
+
diff --git a/src/store/app.ts b/src/store/app.ts
index 59fbdd0..225b64b 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -4,7 +4,7 @@ export const useAppStore = defineStore('User', () => {
   
   //左侧菜单相关
   const menuApp = reactive({
-    isExpaned:true,  //
+    isExpaned:true,  //折叠控制
   });
   return {
     menuApp
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 4bb3338..0d51979 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -2,14 +2,19 @@ import Cookies from "js-cookie";
 
 const TokenKey:string = "Authorization";
 
+// 获取token
 export function getToken() {
-  return Cookies.get(TokenKey);
+  return Cookies.get(TokenKey) || localStorage.getItem(TokenKey);
 }
 
+// 设置token
 export function setToken(token:string) {
-  return Cookies.set(TokenKey, token);
+  localStorage.setItem(TokenKey, token);
+  Cookies.set(TokenKey, token);
 }
 
+// 移除token
 export function removeToken() {
-  return Cookies.remove(TokenKey);
+  localStorage.removeItem(TokenKey);
+  Cookies.remove(TokenKey);
 }
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..deb37af
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,4 @@
+// 深拷贝
+export function deepClone(){
+
+}
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..531b08a
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,113 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { getToken, removeToken } from './auth';
+
+// 定义后端返回的统一数据结构
+interface ApiResponse<T = any> {
+  code: number;
+  data: T;
+  msg: string;
+}
+
+// 创建 Axios 实例
+const createAxiosInstance = (): AxiosInstance => {
+  const instance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL as string, // 从 Vite 环境变量获取 baseURL
+    timeout: 10000, // 请求超时时间
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (config) => {
+      // 添加 token 等请求头
+      const token = getToken()
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+      const { code, msg } = response.data;
+
+      // 401 未授权，跳转首页
+      if (code === 401) {
+        // 这里调用退出登录的逻辑
+        console.log('未授权，跳转首页');
+        // 清除用户信息
+        removeToken();
+        // 跳转首页
+        window.location.href = '/'; //后续用发布订阅模式修改
+        return Promise.reject(new Error(msg || '未授权'));
+      }
+
+      // 其他非 200 状态码
+      if (code !== 200) {
+        console.error(`请求错误 ${code}: ${msg}`);
+        // 这里可以根据需要弹出错误提示
+        return Promise.reject(new Error(msg || '请求错误'));
+      }
+
+      // 返回数据部分
+      return response.data.data;
+    },
+    (error) => {
+      // 处理 HTTP 状态码不是 200 的情况
+      if (error.response) {
+        const { status, data } = error.response;
+        console.error(`HTTP 错误 ${status}:`, data);
+      } else {
+        console.error('请求错误:', error.message);
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+};
+
+const http = createAxiosInstance();
+
+// 封装通用的 request 函数
+async function request<T = any>(config: AxiosRequestConfig): Promise<T> {
+  try {
+    const { data } = await http.request<ApiResponse<T>>(config);
+    return data.data;
+  } catch (error) {
+    // 这里可以统一处理错误，或者让调用者自己处理
+    throw error;
+  }
+}
+
+// 封装常用的 HTTP 方法
+const httpClient = {
+  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request<T>({ ...config, method: 'GET', url });
+  },
+
+  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return request<T>({ ...config, method: 'POST', url, data });
+  },
+
+  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return request<T>({ ...config, method: 'PUT', url, data });
+  },
+
+  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request<T>({ ...config, method: 'DELETE', url });
+  },
+
+  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return request<T>({ ...config, method: 'PATCH', url, data });
+  },
+};
+
+export default httpClient;
\ No newline at end of file
diff --git a/src/views/login/OauthCallBack.vue b/src/views/login/OauthCallBack.vue
index 20a0edd..fddc735 100644
--- a/src/views/login/OauthCallBack.vue
+++ b/src/views/login/OauthCallBack.vue
@@ -5,16 +5,17 @@
 </template>
 
 <script setup>
+import { setToken } from '@/utils/auth';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useMessage } from 'naive-ui';
+
 const { getAccessTokenSilently } = useAuth0();
-const token = ref('');
 const router = useRouter();
 const message = useMessage();
 const oSomethingWithToken = async () => {
   try {
-    console.log('进来了吗？？');
-    token.value = await getAccessTokenSilently();
+    const token = await getAccessTokenSilently();
+    setToken(token);
     message.success('登录成功！');
     router.push('/layout');
   } catch (error) {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6136b41..b3527c4 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -54,7 +54,7 @@
           </div>
         </div>
         <div class="zn-hero__illustration">
-          <img src="/public/logo.jpg" alt="系统预览" />
+          <img src="/logo.jpg" alt="系统预览" />
         </div>
       </section>
 
@@ -202,7 +202,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ChevronForward, GitCompare, BarChartSharp, Server } from '@vicons/ionicons5';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useDialog } from 'naive-ui';
diff --git a/tsconfig.json b/tsconfig.json
index e91a9a7..66deab1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,14 @@
 {
-  "moduleResolution":"node",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","auto-imports.d.ts"],
+  "moduleResolution": "node",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
   "compilerOptions": {
-    "esModuleInterop":true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "module": "es2020",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     },
-    "lib":["es2022"],
+    "lib": ["es2022", "dom","dom.iterable"], // 添加 "dom" 到 lib 数组中
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 36ab365..a5b21f8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,10 @@ import AutoImport from "unplugin-auto-import/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
+   // ...其他配置
+  define: {
+    'process.env': process.env
+  },
   plugins: [
     vue(),
     AutoImport({