添加请求接口

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("请输入账号和密码");
       }

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;

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'
+  })
+}