From 29f6d2b0c98c36e99ab0092d4183883ab395622f Mon Sep 17 00:00:00 2001
From: yulinling <2712495353@qq.com>
Date: Thu, 14 Aug 2025 22:33:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=8A=9F=E8=83=BD=E5=B9=B6=E8=BF=9E=E6=8E=A5=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AF=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构登录逻辑，连接后端登录接口
- 添加成功和失败的提示消息
- 优化表单字段，将账号字段改为用户名
- 更新 fetch 请求的 URL 和处理逻辑
- 调整 fetchInterceptor 中的授权头
- 更新 vite 配置，代理到新的后端地址
---
 src/components/CustomLogin.vue | 68 +++++++++++++++++++---------------
 src/utils/fetchInterceptor.js  |  4 +-
 vite.config.js                 | 11 +++---
 3 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/components/CustomLogin.vue b/src/components/CustomLogin.vue
index 4a654e5..acc8c4e 100644
--- a/src/components/CustomLogin.vue
+++ b/src/components/CustomLogin.vue
@@ -3,37 +3,40 @@ import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { computed, reactive } from 'vue'
 import router from '@/router/index.js'
 import { setToken } from '@/utils/auth.js'
+import { message } from 'ant-design-vue'
 
 const formState = reactive({
-  api: '',
-  account: '',
+  username: '',
   password: '',
-  remember: false
+  rememberMe: false
 })
 
-const onfinish = async () => {
+const onFinish = async () => {
   try {
-    // const response = await fetch('http://localhost:3000/login', {
-    //   method: 'POST',
-    //   cache: 'default',
-    //   headers: {
-    //     'Content-Type': 'application/json; charset=utf-8'
-    //   },
-    //   credentials: 'include',
-    //   body: JSON.stringify(formState)
-    // })
+    const response = await fetch('/api/auth/login', {
+      method: 'POST',
+      cache: 'default',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8'
+      },
+      credentials: 'include',
+      body: JSON.stringify(formState)
+    })
 
-    // if (response.ok) {
-    //   console.log(`formState.account:${formState.account}`)
-    //   setToken(formState.account)
-    //   await router.push('/')
-    // } else {
-    //   console.error('Login failed', response.statusText)
-    // }
-    setToken(formState.account)
-    await router.push('/')
+    const data = await response.json() // 解析响应体
+
+    if (response.ok && data.code === 200) {
+      console.log(`formState.username: ${formState.username}`)
+      setToken(formState.username)
+      message.success('登录成功')
+      await router.push('/')
+    } else {
+      message.error(data.message || '登录失败')
+      console.error('Login failed', data)
+    }
   } catch (e) {
-    console.log(e)
+    message.error('接口请求异常')
+    console.error(e)
   }
 }
 
@@ -42,16 +45,22 @@ const onFinishFailed = () => {
 }
 
 const disabled = computed(() => {
-  return !formState.account || !formState.password
+  return !formState.username || !formState.password
 })
 </script>
 
 <template>
   <a-card class="login-container" :hoverable="true">
-    <a-form :model="formState" name="login" class="login-form" autocomplete="off" @finish="onfinish"
-      @finishFailed="onFinishFailed">
-      <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
-        <a-input v-model:value="formState.account" placeholder="请输入账号">
+    <a-form
+      :model="formState"
+      name="login"
+      class="login-form"
+      autocomplete="off"
+      @finish="onFinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item name="username" :rules="[{ required: true, message: '请输入账号' }]">
+        <a-input v-model:value="formState.username" placeholder="请输入账号">
           <template #prefix>
             <UserOutlined class="site-form-item-icon" style="margin-right: 8px"></UserOutlined>
           </template>
@@ -72,7 +81,8 @@ const disabled = computed(() => {
       </a-form-item>
 
       <a-form-item style="width: 100%">
-        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">登录
+        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
+          >登录
         </a-button>
       </a-form-item>
     </a-form>
diff --git a/src/utils/fetchInterceptor.js b/src/utils/fetchInterceptor.js
index 1a3afe4..f70ca1f 100644
--- a/src/utils/fetchInterceptor.js
+++ b/src/utils/fetchInterceptor.js
@@ -7,7 +7,7 @@ window.fetch = async (input, init = {}) => {
   init = init || {}
   init.headers = {
     ...init.headers, // 合并已有的 headers
-    Authorization: 'Bearer YOUR_TOKEN' // 添加默认授权头
+    // Authorization: 'Bearer YOUR_TOKEN' // 添加默认授权头
   }
 
   if (init && !init.headers) {
@@ -16,7 +16,7 @@ window.fetch = async (input, init = {}) => {
 
   init.headers = {
     ...init.headers,
-    'x-token': '123456'
+    // 'x-token': '123456'
   }
 
   const response = await originalFetch(input, init)
diff --git a/vite.config.js b/vite.config.js
index d114b5b..362af2e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,10 +6,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
+  plugins: [vue(), vueDevTools()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
@@ -17,7 +14,11 @@ export default defineConfig({
   },
   server: {
     proxy: {
-      '/api': 'http://localhost:3000',  // 代理 API 请求
+      '/api': {
+        target: 'http://192.168.2.9:8080', // 代理 API 请求
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
     }
   }
 })