用户信息显示

frontend/src/Route.tsx

@@ -1,7 +1,8 @@
 import { Routes, Route, Outlet, createBrowserRouter, RouterProvider } from "react-router-dom";
+import { ScrollRestoration } from "react-router-dom";
 import Login from '@/views/Login'
 import Register from '@/views/Register'
-import { ScrollRestoration } from "react-router-dom";
+import User from '@/views/User'
 
 const router = createBrowserRouter([
     { path: "*", Component: Root },
@@ -11,7 +12,10 @@ function Root() {
     return (
         <>
             <Routes>
-                <Route path="/" element={<Layout />}></Route>
+                <Route path="/" element={<Layout />}>
+                    <Route path="/user" element={<User />} />
+
+                </Route>
                 <Route path="/login" element={<Login />} />
                 <Route path="/register" element={<Register />} />
             </Routes>
@@ -33,6 +37,7 @@ export function PageRoute() {
 function Layout() {
     return (
         <>
+            <p>我是头部</p>
             <Outlet />
         </>
     )

frontend/src/views/Login.tsx

@@ -14,7 +14,7 @@ import Alert from '@mui/material/Alert';
 import { useSetAtom } from 'jotai';
 import { token, username } from '@/store/store'
 import { login } from '@/apis/apis'
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
 import Loading from '@/components/Loading'
 import CheckInput, { refType } from '@/components/CheckInput'
 
@@ -26,11 +26,10 @@ export default function SignIn() {
     const setToken = useSetAtom(token)
     const setUsername = useSetAtom(username)
     const checkList = React.useRef<Map<string, refType>>(new Map<string, refType>())
+    const navigate = useNavigate();
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        if (loading) return
-        setLoading(true)
 
         const data = new FormData(event.currentTarget);
         const postData = {
@@ -38,14 +37,17 @@ export default function SignIn() {
             password: data.get('password')?.toString(),
         }
         if (!Array.from(checkList.current.values()).map(v => v.verify()).reduce((p, v) => (p == true) && (v == true))) {
-            setLoading(false)
             return
         }
+
+        if (loading) return
+        setLoading(true)
         login(postData.email!, postData.password ?? "").
             then(v => {
                 if (!v) return
                 setToken(v.accessToken)
                 setUsername(v.selectedProfile.name)
+                navigate("/user")
             }).
             catch(v => [setErr(String(v)), console.warn(v)]).
             finally(() => setLoading(false))

frontend/src/views/User.tsx

@@ -0,0 +1,15 @@
+import { token, username } from "@/store/store"
+import { useAtomValue } from "jotai"
+
+export default function User() {
+    const nowToken = useAtomValue(token)
+    const nowUsername = useAtomValue(username)
+
+
+    return (
+        <>
+            <p>你好: {nowUsername}</p>
+            <p>token: {nowToken} </p>
+        </>
+    )
+}