From 5a5bc96c37cc0a68dc46e872dda977199e04081b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Sun, 4 Aug 2024 18:44:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=99=BB=E5=BD=95=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.tsx | 67 ++++++++++++++++++-----------
src/api/User.ts | 3 +-
src/pages/Login/index.tsx | 90 +++++++++++++++++++++++++++++++++++++++
3 files changed, 134 insertions(+), 26 deletions(-)
create mode 100644 src/pages/Login/index.tsx
diff --git a/src/App.tsx b/src/App.tsx
index da9614c..433c4df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,8 @@ import ECommerce from './pages/Dashboard/ECommerce';
import Create from './pages/Create';
import Cate from './pages/Cate';
import DefaultLayout from './layout/DefaultLayout';
+import Login from './pages/Login';
+
import { ConfigProvider } from 'antd';
function App() {
@@ -21,6 +23,8 @@ function App() {
setTimeout(() => setLoading(false), 1000);
}, []);
+ const isLoginRoute = pathname === '/login';
+
return loading ? (
) : (
@@ -33,41 +37,54 @@ function App() {
},
}}
>
-
+ {isLoginRoute ? (
-
-
-
- }
- />
-
-
-
-
- }
- />
-
-
-
-
+
}
/>
-
-
+ ) : (
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+ )}
+
);
}
diff --git a/src/api/User.ts b/src/api/User.ts
index 74701ff..6814fed 100644
--- a/src/api/User.ts
+++ b/src/api/User.ts
@@ -1,7 +1,8 @@
+import { account, editUser, Login, UserInfo } from '@/types/user'
import Request from '@/utils/request'
// 登录
-export const loginDataAPI = (data: Login) => Request("POST", "/login", data)
+export const loginDataAPI = (data: Login) => Request("POST", "/user/login", data)
// 获取用户信息
export const getUserDataAPI = (id?: number) => Request("GET", `/user/${id}`)
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
new file mode 100644
index 0000000..c08fca2
--- /dev/null
+++ b/src/pages/Login/index.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useForm } from 'antd/es/form/Form';
+import { Button, Form, Input, notification } from 'antd';
+import { UserOutlined, LockOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import { loginDataAPI } from '@/api/User';
+import { useUserStore } from '@/stores';
+
+const LoginForm: React.FC = () => {
+ const [form] = useForm();
+ const [isPassVisible, setIsPassVisible] = useState(false);
+ const store = useUserStore();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const returnUrl = new URLSearchParams(location.search).get('returnUrl') || '/home';
+
+ const onSubmit = async () => {
+ try {
+ const values = await form.validateFields();
+ const { data } = await loginDataAPI(values);
+ store.token = data.token;
+ store.user = data.user;
+
+ notification.success({
+ message: 'success',
+ description: `Hello ${data.user.name} 欢迎回来 🎉`,
+ });
+
+ navigate(returnUrl);
+ } catch (error) {
+ console.error('Failed to login:', error);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default LoginForm;