feat(login): 优化登录功能并连接后端接口

- 重构登录逻辑，连接后端登录接口
- 添加成功和失败的提示消息
- 优化表单字段，将账号字段改为用户名
- 更新 fetch 请求的 URL 和处理逻辑
- 调整 fetchInterceptor 中的授权头
- 更新 vite 配置，代理到新的后端地址

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: '',
+  username: '',
-  account: '',
   password: '',
-  remember: false
+  rememberMe: false
 })
 
-const onfinish = async () => {
+const onFinish = async () => {
   try {
-    // const response = await fetch('http://localhost:3000/login', {
+    const response = await fetch('/api/auth/login', {
-    //   method: 'POST',
+      method: 'POST',
-    //   cache: 'default',
+      cache: 'default',
-    //   headers: {
+      headers: {
-    //     'Content-Type': 'application/json; charset=utf-8'
+        'Content-Type': 'application/json; charset=utf-8'
-    //   },
+      },
-    //   credentials: 'include',
+      credentials: 'include',
-    //   body: JSON.stringify(formState)
+      body: JSON.stringify(formState)
-    // })
+    })
 
-    // if (response.ok) {
+    const data = await response.json() // 解析响应体
-    //   console.log(`formState.account:${formState.account}`)
+
-    //   setToken(formState.account)
+    if (response.ok && data.code === 200) {
-    //   await router.push('/')
+      console.log(`formState.username: ${formState.username}`)
-    // } else {
+      setToken(formState.username)
-    //   console.error('Login failed', response.statusText)
+      message.success('登录成功')
-    // }
+      await router.push('/')
-    setToken(formState.account)
+    } else {
-    await router.push('/')
+      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"
+    <a-form
-      @finishFailed="onFinishFailed">
+      :model="formState"
-      <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
+      name="login"
-        <a-input v-model:value="formState.account" placeholder="请输入账号">
+      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>

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)

vite.config.js

@@ -6,10 +6,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
+  plugins: [vue(), vueDevTools()],
-    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/, '')
+      }
     }
   }
 })