From 68ea2af952e27102ac996161ca45a42a2c8783ba Mon Sep 17 00:00:00 2001
From: Seven <1530011482@qq.com>
Date: Tue, 25 Aug 2026 22:19:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=B7=E6=B1=82=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/login/LoginPage.vue | 15 ++++++++++---
 src/utils/request.js          | 42 +++++++++++++++++++++++++++++++++++
 src/utils/user.js             | 18 +++++++++++++++
 3 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/request.js
 create mode 100644 src/utils/user.js

diff --git a/src/pages/login/LoginPage.vue b/src/pages/login/LoginPage.vue
index a81f545..7ccee79 100644
--- a/src/pages/login/LoginPage.vue
+++ b/src/pages/login/LoginPage.vue
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import { login } from "@/utils/user";
 export default {
   name: "LoginPage",
   data() {
@@ -49,9 +50,17 @@ export default {
       // 登录接口接入后在这里提交账号和密码
       // 这里模拟登录成功，直接跳转到聊天页面
       if (this.username && this.password) {
-        this.$store.commit("SET_TOKEN", "mock-token");
-        this.$store.commit("SET_USERNAME", this.username);
-        this.$router.push("/chat");
+        login(this.username, this.password)
+          .then((response) => {
+            const token = response.data.token;
+            this.$store.commit("SET_TOKEN", token);
+            this.$store.commit("SET_USERNAME", this.username);
+            this.$router.push("/chat");
+          })
+          .catch((error) => {
+            console.error(error);
+            this.$message.error("登录失败，请检查账号和密码");
+          });
       } else {
         this.$message.error("请输入账号和密码");
       }
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..6239e91
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,42 @@
+import axios from 'axios';
+import store from '../store';
+import router from '../router';
+
+// 配置请求
+const request = axios.create({
+  // baseURL: process.env.REACT_APP_API_BASE_URL,
+  baseURL: "/api",
+  timeout: 10000,
+});
+
+// 请求拦截器：每次请求都带上token
+request.interceptors.request.use(
+  (config) => {
+    // 在请求头中添加token
+    const token = store.state.token;
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+request.interceptors.response.use(
+  (response) => {
+    return response.data;  
+  },
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      // 如果返回401，说明token过期或无效，清除token并跳转到登录页
+      store.commit('SET_TOKEN', '');
+      store.commit('SET_USERNAME', '');
+      router.push('/login');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/src/utils/user.js b/src/utils/user.js
new file mode 100644
index 0000000..8fb6cdf
--- /dev/null
+++ b/src/utils/user.js
@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 登录
+export function login(data) {
+  return request({
+    url: '/login',
+    method: 'post',
+    data
+  })
+}
+
+// 获取用户信息
+export function getUserInfo() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
\ No newline at end of file