为了即使在页面刷新时也能保持用户的状态，使用sessionStorage做临时持久化存储，我们将使用 useSessionStorage hook，它将同步浏览器本地存储中的状态值：

// useSessionStorage.ts
import { useState } from 'react'

export const useSessionStorage = (keyName: any, defaultValue: any) => {
	const [storedValue, setStoredValue] = useState(() => {
		try {
			const value = window.sessionStorage.getItem(keyName)
			if (value) {
				return JSON.parse(value)
			} else {
				window.sessionStorage.setItem(keyName, JSON.stringify(defaultValue))
				return defaultValue
			}
		} catch (err) {
			return defaultValue
		}
	})

	const setValue = (newValue: any) => {
		try {
			window.sessionStorage.setItem(keyName, JSON.stringify(newValue))
		} catch (err) {}
		setStoredValue(newValue)
	}

	return [storedValue, setValue]
}

AuthProvider.tsx

// AuthProvider.tsx
import { useMemo } from 'react'
import { useLocalStorage } from '../hooks/useLocalStorage'
import { fakeAuthProvider } from './auth'
import AuthContext from './AuthContext'

export default function AuthProvider({ children }: { children: React.ReactNode }) {
	const [user, setUser] = useSessionStorage('user', null)
	const [role, setRole] = useSessionStorage('role', null)

	const signin = (newUser: string, callback: VoidFunction) => {
		return fakeAuthProvider.signin(() => {
			setUser(newUser)
			// 模拟管理员登录
			newUser === 'admin' ? setRole('admin') : setRole('user')
			callback()
		})
	}

	const signout = (callback: VoidFunction) => {
		return fakeAuthProvider.signout(() => {
			setUser(null)
			setRole(null)
			callback()
		})
	}

	const value = useMemo(() => ({ user, role, signin, signout }), [role, user])

	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

import { useContext } from "react";
import AuthContext from "../auth/AuthContext";

export default function useAuth() {
	return useContext(AuthContext)
}

import { Navigate, Outlet, useLocation } from 'react-router-dom'
import useAuth from '../hooks/useAuth'

export default function AuthRoute(props: any) {
	const auth = useAuth()
	const location = useLocation()

	if (!auth.user) {
		return <Navigate to="/login" state={{ from: location }} replace />
	}
	return props.children ? props.children : <Outlet />
}

import { useNavigate } from 'react-router-dom'
import useAuth from '../hooks/useAuth'

export default function AuthStatus() {
	const auth = useAuth()
	const navigate = useNavigate()

	if (!auth.user) {
		return <h3>You are not logged in.</h3>
	}

	return (
		<p>
			Welcome {auth.user}!{' '}
			<button
				onClick={() => {
					auth.signout(() => navigate('/'))
				}}
			>
				Sign out
			</button>
		</p>
	)
}

// Layout.tsx
import { Outlet } from 'react-router-dom'
import AuthStatus from '../components/AuthStatus'

export default function Layout() {
	return (
		<div>
			<AuthStatus />
			<Outlet />
		</div>
	)
}

// Home.tsx
import { Link } from 'react-router-dom'
import useAuth from '../../hooks/useAuth'

export default function Home() {
	const auth = useAuth()

	return (
		<ul>
			{!auth.user ? (
				<li>
					<Link to="/login">登录</Link>
				</li>
			) : (
				<li>
					<Link to="/backend">后台</Link>
				</li>
			)}
			{auth.role === 'admin' ? (
				<li>
					<Link to="/admin">管理员</Link>
				</li>
			) : null}
		</ul>
	)
}

// Login.tsx
import { Link, useLocation, useNavigate } from 'react-router-dom'
import useAuth from '../../hooks/useAuth'

export default function Login() {
  const navigate = useNavigate()
  const location = useLocation()
  const auth = useAuth()
  const from = location.state?.from?.pathname || '/'

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()

    let formData = new FormData(event.currentTarget)
    let username = formData.get('username') as string

    auth.signin(username, () => {
      navigate(from, { replace: true })
    })
  }

  return (
    <>
      <h1>登录页</h1>
      <div>
        <form onSubmit={handleSubmit}>
          <label>
            Username: <input name="username" type="text" />
          </label>
          <button type="submit">Login</button>
        </form>
      </div>
      <Link to="/">回首页</Link>
    </>
  )
}

// router.tsx
import { lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import Layout from '../layout'
import AuthRoute from '../components/AuthRoute'
import Home from '../pages/home/Home'
// lazy-loading 需要结合 React.Suspense
const Login = lazy(() => import('../pages/login/Login'))
const Backend = lazy(() => import('../pages/backend/Backend'))
const Admin = lazy(() => import('../pages/admin/Admin'))

const router = createBrowserRouter([
	{
		path: '/',
		element: <Layout />,
		children: [
			{
				index: true,
				element: <Home />,
			},
			{
				path: 'login',
				element: <Login />,
			},
			{
				path: 'backend',
				element: (
					<AuthRoute>
						<Backend />
					</AuthRoute>
				),
			},
			{
				path: 'admin',
				element: (
					<AuthRoute>
						<Admin />
					</AuthRoute>
				),
			},
		],
	},
])

export default router