diff --git a/src/feature/auth/AuthLayout.tsx b/src/feature/auth/AuthLayout.tsx
index cceaf2d..656d869 100644
--- a/src/feature/auth/AuthLayout.tsx
+++ b/src/feature/auth/AuthLayout.tsx
@@ -17,12 +17,9 @@
                     position: 'relative',
                 }}
             >
-                {/* <h1>
-                    登录创驿
-                </h1>
-                <p>
-                    与众多用户和创作者一起交流
-                </p> */}
+                <Card style={{ padding: 0, margin: 0, background: 'rgba(255,255,255,0)', border: 'none' }}>
+                    <img src={slogan} width="100%" />
+                </Card>
             </div>
             <Flex
                 style={{ width: 400, height: '80vh' }}
@@ -33,9 +30,7 @@
                 <Card>
                     <Outlet></Outlet>
                 </Card>
-                <Card style={{ padding: 0, margin: 0 }}>
-                    <img src={slogan} width="100%" />
-                </Card>
+
             </Flex>
         </Flex>
     );
diff --git a/src/feature/auth/Forget.tsx b/src/feature/auth/Forget.tsx
index 25bf6dc..a98ffcf 100644
--- a/src/feature/auth/Forget.tsx
+++ b/src/feature/auth/Forget.tsx
@@ -1,16 +1,74 @@
 import { MailOutlined, LockOutlined } from '@ant-design/icons';
-import { Button, Form, Input, message, Row, Col } from 'antd';
-import { NavLink } from 'react-router';
+import { Button, Form, Input, message, Row, Col, Modal } from 'antd';
+import { NavLink, useNavigate } from 'react-router';
 import { useState, useEffect } from 'react';
+import { useForm } from 'antd/es/form/Form';
+import authApi from '../../api/authApi';
+
+// 定义表单值的类型
+interface FormValues {
+    email: string;
+    code: string;
+    password: string;
+    confirmPassword: string;
+}
+
 
 function Forget() {
     const [countdown, setCountdown] = useState(0);
-    const [emailSent,] = useState(false);
+    const [emailSent, setEmailSent] = useState(false); // 是否已发送验证码
+    const [form] = useForm<FormValues>();
+    const emailValue = Form.useWatch('email', form);
+    const [messageApi, contextHolder] = message.useMessage();
+    const nav = useNavigate(); // 页面跳转
 
-    const onFinish = async () => {
+    // 校验邮箱格式
+    function isValidEmail(email: string): boolean {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        console.log(emailRegex.test(email))
+        console.log(email)
+        return emailRegex.test(email);
+    }
 
+    // 发送验证码
+    const sendResetCode = async () => {
+        if (!isValidEmail(emailValue)) {
+            form.validateFields(['email']);
+            return;
+        }
+
+        await authApi.sendResetCode(emailValue).then(() => {
+            setEmailSent(true);
+            setCountdown(60);
+        }).catch((error) => {
+            messageApi.error(error?.message || '验证码发送失败');
+        });
     };
 
+    const [modal, modalContext] = Modal.useModal();
+
+    const countDownNav = (onOk: () => void) => {
+        let secondsToGo = 5;
+        const instance = modal.success({
+            title: '重置成功',
+            content: `系统将在 ${secondsToGo} 后跳转到登陆页面.`,
+            okText: "立即跳转",
+            onOk
+        });
+
+        const timer = setInterval(() => {
+            secondsToGo -= 1;
+            instance.update({
+                content: `将在 ${secondsToGo} 后回到登陆页面.`,
+            });
+        }, 1000);
+
+        setTimeout(() => {
+            clearInterval(timer);
+            instance.destroy();
+        }, secondsToGo * 1000);
+    };
+    // 倒计时发送
     useEffect(() => {
         let countdownTimer = null;
 
@@ -27,92 +85,117 @@
         };
     }, [countdown]);
 
+    // 重新发送验证码
     const resendCode = () => {
         if (countdown > 0) return;
         setCountdown(60);
-        message.info('验证码已重新发送');
+        sendResetCode();  // 重新发送验证码
+    };
+
+    // 表单提交处理
+    const onFinish = (values: FormValues) => {
+        if (!emailSent) {
+            sendResetCode();
+        } else {
+            console.log(values);
+            authApi.resetPassword({
+                email: values.email,
+                code: values.code,
+                newPassword: values.password,
+            }).then((response) => {
+                if (response.data.code == 0) {
+                    countDownNav(() => nav('/login'))
+                } else {
+                    messageApi.error(response.data.message);
+                }
+            })
+        }
     };
 
     return (
-        <Form
-            name="forget"
-            initialValues={{ remember: true }}
-            style={{ maxWidth: 360 }}
-            onFinish={onFinish}
-        >
-            <h2>重置密码</h2>
-            <p>请输入您注册时使用的邮箱地址</p>
-
-            <Form.Item
-                name="email"
-                rules={[
-                    { required: true, message: '请输入您的邮箱！' },
-                    { type: 'email', message: '请输入正确的邮箱格式' }
-                ]}
+        <>
+            <Form
+                form={form}
+                name="forget"
+                initialValues={{ remember: false }}
+                onFinish={onFinish}
             >
-                <Input prefix={<MailOutlined />} placeholder="注册邮箱" />
-            </Form.Item>
+                {contextHolder}
+                <h2>重置密码</h2>
+                <p>请输入您注册时使用的邮箱地址</p>
 
-            {emailSent && (
-                <>
-                    <Form.Item
-                        name="code"
-                        rules={[{ required: true, message: '请输入验证码！' }]}
-                    >
-                        <Row gutter={8}>
-                            <Col span={16}>
-                                <Input placeholder="验证码" />
-                            </Col>
-                            <Col span={8}>
-                                <Button
-                                    disabled={countdown > 0}
-                                    onClick={resendCode}
-                                    style={{ width: '100%' }}
-                                >
-                                    {countdown > 0 ? `${countdown}s后重试` : '重新发送'}
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Form.Item>
+                <Form.Item
+                    name="email"
+                    rules={[
+                        { required: true, message: '请输入您的邮箱！' },
+                        { type: 'email', message: '请输入正确的邮箱格式' }
+                    ]}
+                >
+                    <Input prefix={<MailOutlined />} placeholder="注册邮箱" />
+                </Form.Item>
 
-                    <Form.Item
-                        name="password"
-                        rules={[
-                            { required: true, message: '请设置新密码！' },
-                            { min: 6, message: '密码长度至少为6位' }
-                        ]}
-                    >
-                        <Input.Password prefix={<LockOutlined />} placeholder="新密码" />
-                    </Form.Item>
+                {emailSent && (
+                    <>
+                        <Form.Item
+                            name="code"
+                            rules={[{ required: true, message: '请输入验证码！' }]}
+                        >
+                            <Row gutter={8}>
+                                <Col span={16}>
+                                    <Input placeholder="验证码" />
+                                </Col>
+                                <Col span={8}>
+                                    <Button
+                                        disabled={countdown > 0}
+                                        onClick={resendCode}
+                                        style={{ width: '100%' }}
+                                    >
+                                        {countdown > 0 ? `${countdown}s后重试` : '重新发送'}
+                                    </Button>
+                                </Col>
+                            </Row>
+                        </Form.Item>
 
-                    <Form.Item
-                        name="confirmPassword"
-                        dependencies={['password']}
-                        rules={[
-                            { required: true, message: '请确认新密码！' },
-                            ({ getFieldValue }) => ({
-                                validator(_, value) {
-                                    if (!value || getFieldValue('password') === value) {
-                                        return Promise.resolve();
-                                    }
-                                    return Promise.reject(new Error('两次输入的密码不一致！'));
-                                },
-                            }),
-                        ]}
-                    >
-                        <Input.Password prefix={<LockOutlined />} placeholder="确认新密码" />
-                    </Form.Item>
-                </>
-            )}
+                        <Form.Item
+                            name="password"
+                            rules={[
+                                { required: true, message: '请设置新密码！' },
+                                { min: 6, message: '密码长度至少为6位' }
+                            ]}
+                        >
+                            <Input.Password prefix={<LockOutlined />} placeholder="新密码" />
+                        </Form.Item>
 
-            <Form.Item>
-                <Button block type="primary" htmlType="submit">
-                    {emailSent ? '确认重置' : '获取验证码'}
-                </Button>
-                或 <NavLink to='/login'>返回登录</NavLink>
-            </Form.Item>
-        </Form>
+                        <Form.Item
+                            name="confirmPassword"
+                            dependencies={['password']}
+                            rules={[
+                                { required: true, message: '请确认新密码！' },
+                                ({ getFieldValue }) => ({
+                                    validator(_, value) {
+                                        if (!value || getFieldValue('password') === value) {
+                                            return Promise.resolve();
+                                        }
+                                        return Promise.reject(new Error('两次输入的密码不一致！'));
+                                    },
+                                }),
+                            ]}
+                        >
+                            <Input.Password prefix={<LockOutlined />} placeholder="确认新密码" />
+                        </Form.Item>
+                    </>
+                )}
+
+                <Form.Item>
+                    <Button block type="primary" htmlType="submit">
+                        {emailSent ? '确认重置' : '获取验证码'}
+                    </Button>
+                    或 <NavLink to='/login'>返回登录</NavLink>
+                </Form.Item>
+            </Form>
+            {modalContext}
+        </>
     );
 }
 
-export default Forget;    
\ No newline at end of file
+export default Forget;
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;
diff --git a/src/feature/auth/Register.tsx b/src/feature/auth/Register.tsx
index 08edc70..0023b71 100644
--- a/src/feature/auth/Register.tsx
+++ b/src/feature/auth/Register.tsx
@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
 import { LockOutlined, MailOutlined, NumberOutlined, UserOutlined } from '@ant-design/icons';
-import {Button, Checkbox, Form, Input, Space} from 'antd';
-import { NavLink } from 'react-router';
-import authApi from "../../api/authApi.ts";
+import { Button, Checkbox, Form, Input, message, Space } from 'antd';
+import { NavLink, useNavigate } from 'react-router';
+import authApi from "../../api/authApi";
+import type { RejisterRequest } from "../../api/type";
+import type { AxiosResponse } from 'axios';
 
+// 定义表单字段的类型
 interface FormValues {
     name: string;
     email: string;
@@ -16,42 +19,65 @@
 function Register() {
     const [countdown, setCountdown] = useState(0);
     const [form] = Form.useForm<FormValues>();
-    const emailValue = Form.useWatch('email', form)
+    const emailValue = Form.useWatch('email', form);
+    const [messageApi, contextHolder] = message.useMessage();
+    const nav = useNavigate(); // 用于页面跳转
 
-    // 
+    // 校验邮箱格式
     function isValidEmail(email: string): boolean {
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
         return emailRegex.test(email);
     }
 
+    // 发送验证码
     const sendVerificationCode = () => {
-        // 如果邮箱校验不通过，则触发表单校验提示，并中断
         if (!isValidEmail(emailValue)) {
             form.validateFields(['email']);
             return;
         }
 
-        // 发起 POST 请求到后端 /sendVerification
-        authApi.sendVerificationCode(emailValue).catch()
-        setCountdown(60);
+        authApi.sendVerificationCode(emailValue).then(() => {
+            setCountdown(60); // 开始倒计时
+        }).catch((error) => {
+            messageApi.error(error?.message || '验证码发送失败');
+        });
     };
 
-    // 发送表单倒计时
+    // 倒计时处理
     useEffect(() => {
-        if (countdown > 0) {
-            const timer = setTimeout(() => {
-                setCountdown(prev => prev - 1);
-            }, 1000);
+        if (countdown === 0) return;
+        const timer = setInterval(() => {
+            setCountdown(prev => {
+                if (prev === 1) clearInterval(timer); // 倒计时结束
+                return prev - 1;
+            });
+        }, 1000);
 
-            return () => clearTimeout(timer);
-        }
+        return () => clearInterval(timer);
     }, [countdown]);
 
-
     // 表单提交
     const onFinish = (values: FormValues) => {
-        console.log('注册成功:', values);
+        const registerRequest: RejisterRequest = {
+            username: values.name,
+            email: values.email,
+            verificationCode: values.verifyCode,
+            password: values.password,
+        };
+
+        authApi.register(registerRequest).then((response: AxiosResponse) => {
+            if (response.data.code === 200) {
+                messageApi.success("注册成功");
+                form.resetFields(); // 清空表单
+                setTimeout(() => {
+                    nav('/login'); // 注册成功后跳转到登录页面
+                }, 1500);
+            } else {
+                messageApi.error(response.data.message);
+            }
+        }).catch((error) => {
+            messageApi.error(error?.message || '注册失败，请重试');
+        });
     };
 
     return (
@@ -62,6 +88,7 @@
             scrollToFirstError
         >
             <h2>注册</h2>
+            {contextHolder}
 
             <Form.Item
                 name="name"
@@ -72,7 +99,6 @@
 
             <Form.Item
                 name="email"
-
                 rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式错误' }]}
             >
                 <Input
@@ -163,4 +189,4 @@
     );
 }
 
-export default Register;    
\ No newline at end of file
+export default Register;
diff --git a/src/feature/auth/authSlice.ts b/src/feature/auth/authSlice.ts
index 01cd4e5..f1ab2a0 100644
--- a/src/feature/auth/authSlice.ts
+++ b/src/feature/auth/authSlice.ts
@@ -1,17 +1,98 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
 import type { AuthState } from "../../store/types";
+import type { LoginRequest } from "../../api/type";
+import authAPI from "../../api/authApi";
 
 
 const initialState: AuthState = {
   token: '',
   loading: false,
   isAuth: false,
+  error: ''
 }
 
+export const loginUser = createAsyncThunk<
+  {token: string},
+  LoginRequest,
+  { rejectValue: string }
+>(
+  'auth/login',
+  async (loginRequest: LoginRequest, { rejectWithValue }) => {
+    try {
+      const response = await authAPI.login(loginRequest);
+      if(response.data.code == 0) {
+        return {token: response.data.data};
+      }
+      else 
+        return rejectWithValue(response.data.message);
+    } catch {
+      return rejectWithValue('登录失败');
+    }
+  }
+);
+
+export const refreshToken = createAsyncThunk<
+  {token: string},
+  string,
+  { rejectValue: string }
+>(
+
+  'auth/refresh',
+  async (oldToken: string, { rejectWithValue }) => {
+    try {
+      const response = await authAPI.refreshToken(oldToken);
+      if(response.data.code == 0)
+        return {token: response.data.data};
+      else 
+        return rejectWithValue(response.data.message);
+    } catch {
+      return rejectWithValue('刷新失败');
+    }
+  }
+);
+
 const authSlice = createSlice({
   name: 'auth',
   initialState,
-  reducers: {},
+  reducers: {
+    logout: (state) => {
+      state.token = '';
+      state.isAuth = false;
+      localStorage.clear()
+    },
+  },extraReducers: (builder) => {
+      // 处理登录的异步操作
+      builder
+        .addCase(loginUser.pending, (state) => {
+          state.loading = true;
+        })
+        .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
+          state.loading = false;
+          state.token = action.payload.token;
+          state.isAuth = true;
+
+          localStorage.setItem('token', state.token);
+        })
+        .addCase(loginUser.rejected, (state, action) => {
+          state.loading = false;
+          state.error = action.payload ? action.payload : '' // 错误处理
+        })
+
+        // 处理刷新 token 的异步操作
+        .addCase(refreshToken.pending, (state) => {
+          state.loading = true;
+        })
+        .addCase(refreshToken.fulfilled, (state, action) => {
+          state.loading = false;
+          state.token = action.payload.token; 
+          localStorage.setItem('token', state.token);
+        })
+        .addCase(refreshToken.rejected, (state, action) => {
+          state.loading = false;
+          state.error = action.payload ? action.payload : ''
+        });
+    },
+    
 });
   
 export default authSlice.reducer;
\ No newline at end of file