完善验证页面和后端接口的链接
> 1. 配置了开发环境的端口转发 -> localhost:8080\
> 2. 完成了注册，登录，忘记密码页的功能
> 3. 为项目配置了vitest测试框架
> 4. 对这三个页面进行了测试
> 重写了/test/setup.ts
Change-Id: I46c600ce06d698dae6953b2e1e3ff4a98b0f3de4
diff --git a/src/feature/auth/Login.tsx b/src/feature/auth/Login.tsx
index 14bf6c8..8043007 100644
--- a/src/feature/auth/Login.tsx
+++ b/src/feature/auth/Login.tsx
@@ -1,19 +1,48 @@
+import { Loading3QuartersOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Flex, Form, Input } from 'antd';
+import { NavLink, useNavigate } from 'react-router';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { loginUser } from './authSlice';
+import { useEffect, useRef } from 'react';
+import useMessage from 'antd/es/message/useMessage';
-import { LockOutlined, MailOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Form, Input, Flex } from 'antd';
-import { NavLink } from 'react-router';
+// 定义 Form 表单的字段类型
+interface FormValues {
+ email: string;
+ password: string;
+ remember: boolean;
+}
+
function Login() {
- const onFinish = (values: unknown) => {
- console.log('Received values of form: ', values);
+ const dispatch = useAppDispatch();
+ const auth = useAppSelector(state => (state.auth));
+ const [messageApi, Message] = useMessage()
+ const nav = useRef(useNavigate())
+
+ useEffect(() => {
+ if (auth.isAuth) {
+ nav.current('/');
+ }
+ if (!auth.loading && auth.error) {
+ messageApi.error(auth.error);
+ }
+ }, [auth, messageApi, nav])
+ // 给 onFinish 参数添加类型
+ const onFinish = async (values: FormValues) => {
+ try {
+ await dispatch(loginUser({ email: values.email, password: values.password }));
+ } catch (error) {
+ console.error('登录失败', error);
+ }
};
return (
<Form
name="login"
initialValues={{ remember: true }}
- style={{ maxWidth: 360 }}
onFinish={onFinish}
>
+ {Message}
<h2>登录</h2>
<Form.Item
name="email"
@@ -32,19 +61,23 @@
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>自动登录</Checkbox>
</Form.Item>
- <NavLink to='/forget'> 忘记密码 </NavLink>
-
+ <NavLink to="/forget"> 忘记密码 </NavLink>
</Flex>
</Form.Item>
<Form.Item>
<Button block type="primary" htmlType="submit">
- 登录
+ {auth.loading ? (
+ <><Loading3QuartersOutlined /></>
+ ) : (
+ <>登录</>
+ )
+ }
</Button>
- 或 <NavLink to='/register'>注册</NavLink>
+ 或 <NavLink to="/register">注册</NavLink>
</Form.Item>
</Form>
);
-};
+}
-export default Login;
\ No newline at end of file
+export default Login;