前端：第八章-用户认证模块

第八章：用户认证模块

🎯本章目标：开发登录、注册页面，实现 Token 认证和表单验证。

8.1 登录页面开发

8.1.1 创建登录页面

创建src/views/login/index.vue：

<template> <div> <!-- 左侧装饰区域 --> <div> <div> <h1>智能知识管理平台</h1> <p> 收集知识 → 组织知识 → 智能检索 → AI 辅助 </p> <div> <div> <el-icon :size="24"><Folder /></el-icon> <span>多知识库管理</span> </div> <div> <el-icon :size="24"><Search /></el-icon> <span>智能语义搜索</span> </div> <div> <el-icon :size="24"><ChatDotRound /></el-icon> <span>AI 知识问答</span> </div> </div> </div> </div> <!-- 右侧登录表单 --> <div> <div> <!-- Logo --> <div> <el-icon :size="40"><Collection /></el-icon> <span>知识管理</span> </div> <!-- 标题 --> <div> <h2>欢迎回来</h2> <p>请登录您的账号</p> </div> <!-- 登录表单 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @submit.prevent="handleLogin" > <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名或邮箱" prefix-icon="User" size="large" clearable /> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock" size="large" show-password @keyup.enter="handleLogin" /> </el-form-item> <!-- 记住我 & 忘记密码 --> <div> <el-checkbox v-model="loginForm.remember">记住我</el-checkbox> <router-link to="/forgot-password"> 忘记密码？ </router-link> </div> <!-- 登录按钮 --> <el-form-item> <el-button type="primary" size="large" :loading="loading" @click="handleLogin" > 登 录 </el-button> </el-form-item> </el-form> <!-- 注册链接 --> <div> <span>还没有账号？</span> <router-link to="/register"> 立即注册 </router-link> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref, reactive, onMounted } from 'vue' import { useRouter, useRoute } from 'vue-router' import { ElMessage } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus' import { Folder, Search, ChatDotRound, Collection } from '@element-plus/icons-vue' import { useUserStore } from '@/stores/user' import { login as loginApi } from '@/api/user' const router = useRouter() const route = useRoute() const userStore = useUserStore() // 本地存储键名 const REMEMBER_KEY = 'knowledge_remember_user' // 表单引用 const loginFormRef = ref<FormInstance>() // 加载状态 const loading = ref(false) // 表单数据 const loginForm = reactive({ username: '', password: '', remember: false, }) // 表单验证规则 const loginRules: FormRules = { username: [ { required: true, message: '请输入用户名或邮箱', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }, ], } // 页面加载时读取记住的用户信息 onMounted(() => { const savedUser = localStorage.getItem(REMEMBER_KEY) if (savedUser) { try { const { username, password, remember } = JSON.parse(savedUser) loginForm.username = username || '' loginForm.password = password || '' loginForm.remember = remember || false } catch { localStorage.removeItem(REMEMBER_KEY) } } }) // 登录处理 async function handleLogin() { if (!loginFormRef.value) return try { await loginFormRef.value.validate() loading.value = true const result = await loginApi({ username: loginForm.username, password: loginForm.password, remember: loginForm.remember, }) // 处理"记住我"：保存或清除用户名密码 if (loginForm.remember) { localStorage.setItem(REMEMBER_KEY, JSON.stringify({ username: loginForm.username, password: loginForm.password, remember: true, })) } else { localStorage.removeItem(REMEMBER_KEY) } // 保存登录状态 userStore.login(result.accessToken, result.refreshToken, result.user) ElMessage.success('登录成功') // 跳转到之前的页面或首页 const redirect = route.query.redirect as string router.push(redirect || '/') } catch (error) { console.error('登录失败:', error) } finally { loading.value = false } } </script> <style scoped> .login-container { @apply min-h-screen flex; } /* 左侧装饰区域 */ .login-banner { @apply hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary to-primary-dark; @apply items-center justify-center p-12; } .banner-content { @apply text-white text-center; } .banner-title { @apply text-4xl font-bold mb-4; } .banner-subtitle { @apply text-lg text-white/80 mb-8; } .banner-features { @apply flex flex-col gap-4 items-center; } .feature-item { @apply flex items-center gap-3 text-white/90; } /* 右侧登录表单 */ .login-form-container { @apply flex-1 flex items-center justify-center p-8; @apply bg-gray-50; } html.dark .login-form-container { @apply bg-slate-900; } .login-form-wrapper { @apply w-full max-w-md; } .login-logo { @apply flex items-center justify-center gap-3 mb-8; } .logo-icon { @apply text-primary; } .logo-text { @apply text-2xl font-bold text-gray-900; } html.dark .logo-text { @apply text-gray-100; } .login-header { @apply text-center mb-8; } .login-title { @apply text-2xl font-bold text-gray-900 mb-2; } html.dark .login-title { @apply text-gray-100; } .login-subtitle { @apply text-gray-500; } .login-form { @apply space-y-4; } .login-options { @apply flex justify-between items-center mb-4; } .forgot-link { @apply text-sm text-primary hover:text-primary-hover; } .login-btn { @apply w-full; } .login-footer { @apply text-center mt-6 text-gray-500; } .register-link { @apply text-primary hover:text-primary-hover ml-1; } </style>