diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx index e677722..49573ba 100644 --- a/web/src/pages/Login.tsx +++ b/web/src/pages/Login.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react' import { useNavigate } from 'react-router-dom' -import { Form, Input, Button, Card, Modal, message, Typography, Radio, Alert } from 'antd' +import { Form, Input, Button, Card, Modal, message, Typography, Radio, Alert, Checkbox } from 'antd' import { UserOutlined, LockOutlined, IdcardOutlined } from '@ant-design/icons' import { fetchWithAuth } from '../utils/request' import styles from './Login.module.less' @@ -27,12 +27,28 @@ const Login: React.FC = () => { const [loading, setLoading] = useState(false) const [registerModalVisible, setRegisterModalVisible] = useState(false) const [userTypeModalVisible, setUserTypeModalVisible] = useState(false) // 用户类型补充模态框 + const [rememberMe, setRememberMe] = useState(false) // 记住密码状态 // const [userType, setUserType] = useState('') // 临时存储用户选择的类型 const [loginForm] = Form.useForm() const [registerForm] = Form.useForm() const [userTypeForm] = Form.useForm() - // 如果已登录,重定向到首页 + // 页面加载时读取保存的登录信息 + useEffect(() => { + const savedUsername = localStorage.getItem('savedUsername') + const savedPassword = localStorage.getItem('savedPassword') + const savedRememberMe = localStorage.getItem('rememberMe') === 'true' + + if (savedRememberMe && savedUsername && savedPassword) { + loginForm.setFieldsValue({ + username: savedUsername, + password: savedPassword + }) + setRememberMe(true) + } + }, [loginForm]) + + // 如果已登录,重定向到首页 useEffect(() => { const token = localStorage.getItem('token') if (token) { @@ -52,9 +68,22 @@ const Login: React.FC = () => { const data: LoginResponse = await response.json() if (data.success && data.data) { + // 保存登录凭证 localStorage.setItem('token', data.data.token) localStorage.setItem('user', JSON.stringify(data.data.user)) + // 处理记住密码 + if (rememberMe) { + localStorage.setItem('savedUsername', values.username) + localStorage.setItem('savedPassword', values.password) + localStorage.setItem('rememberMe', 'true') + } else { + // 取消记住密码时清除保存的信息 + localStorage.removeItem('savedUsername') + localStorage.removeItem('savedPassword') + localStorage.removeItem('rememberMe') + } + // 检查是否需要补充用户类型 if (data.need_user_type) { setUserTypeModalVisible(true) @@ -172,6 +201,15 @@ const Login: React.FC = () => { /> + + setRememberMe(e.target.checked)} + > + 记住密码 + + +