feat: 登录界面添加记住密码功能
- 添加"记住密码"复选框,提升用户体验 - 实现自动保存和填充用户名密码 - 支持取消记住密码时自动清除已保存信息 - 使用localStorage存储登录凭证 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
4c06a8acd5
commit
72d3ca0660
@ -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<string>('') // 临时存储用户选择的类型
|
||||
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 = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Checkbox
|
||||
checked={rememberMe}
|
||||
onChange={(e) => setRememberMe(e.target.checked)}
|
||||
>
|
||||
记住密码
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" block loading={loading}>
|
||||
登录
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user