diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx index 7c44cd9..e61d4f8 100644 --- a/src/components/LoadingScreen.tsx +++ b/src/components/LoadingScreen.tsx @@ -3,14 +3,14 @@ import useBackDrop from "hooks/useBackDrop"; import { useEffect } from "react"; export default function LoadingScreen() { - const { setShowBackDrop } = useBackDrop(); + const { setShowBackDrop, showBackDrop } = useBackDrop(); useEffect(() => { setShowBackDrop(true); return () => { setShowBackDrop(false); }; - }, []); + }, [showBackDrop]); return Loading...; } diff --git a/src/guards/AuthGuard.tsx b/src/guards/AuthGuard.tsx new file mode 100644 index 0000000..08dca20 --- /dev/null +++ b/src/guards/AuthGuard.tsx @@ -0,0 +1,29 @@ +import { HasChildren } from "@types"; +import useAuth from "hooks/useAuth"; +import Login from "pages/auth/login"; +import { useState } from "react"; +import { Navigate, useLocation } from "react-router-dom"; + +export default function AuthGuard({ children }: HasChildren) { + const { authenticated } = useAuth(); + + const { pathname } = useLocation(); + + const [requestedLocation, setRequestedLocation] = useState( + null + ); + + if (!authenticated) { + if (pathname !== requestedLocation) { + setRequestedLocation(pathname); + } + return ; + } + + if (requestedLocation && pathname !== requestedLocation) { + setRequestedLocation(null); + return ; + } + + return <>{children}; +} diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index 4968942..ce627a0 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -9,6 +9,7 @@ import useSnackbarCustom from "hooks/useSnackbarCustom"; import { PageID } from "pages"; import { useState } from "react"; import { useForm } from "react-hook-form"; +import { useLocation } from "react-router-dom"; import { getPath } from "routes/path"; import * as Yup from "yup"; @@ -24,6 +25,7 @@ const LoginSchema = Yup.object().shape({ export default function Login() { const { success, error } = useSnackbarCustom(); + const { pathname } = useLocation(); const [message, setMessage] = useState(""); const [sending, setSending] = useState(false); @@ -49,7 +51,9 @@ export default function Login() { if (ret) { success("ログイン成功"); - navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW)); + if (pathname === getPath(PageID.LOGIN)) { + navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW)); + } } else { error("ログイン失敗"); setMessage("入力情報を確認してください"); diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx index 84a2bde..f7eab2d 100644 --- a/src/routes/sub/dashboard.tsx +++ b/src/routes/sub/dashboard.tsx @@ -1,4 +1,5 @@ import { SeasonTicketContractContextProvider } from "contexts/dashboard/SeasonTicketContractContext"; +import AuthGuard from "guards/AuthGuard"; import useAuth from "hooks/useAuth"; import DashboardLayout from "layouts/dashbord"; import { PageID } from "pages"; @@ -8,11 +9,7 @@ import { Loadable } from "routes"; import { getRoute } from "routes/path"; export default function DashboardRoutes(): RouteObject[] { - const { authenticated } = useAuth(); - const children: RouteObject[] = useMemo(() => { - if (!authenticated) return []; - const Dashboard = Loadable(lazy(() => import("pages/dashboard"))); const ContractEntry = Loadable( lazy(() => import("pages/dashboard/contract/entry")) @@ -74,11 +71,9 @@ export default function DashboardRoutes(): RouteObject[] { ...others, path: getRoute(pageId), })); - }, [authenticated]); + }, []); const seasonTicketContractChildren: RouteObject[] = useMemo(() => { - if (!authenticated) return []; - const ContractList = Loadable( lazy(() => import("pages/dashboard/contract/list")) ); @@ -163,11 +158,15 @@ export default function DashboardRoutes(): RouteObject[] { ...others, path: getRoute(pageId), })); - }, [authenticated]); + }, []); return [ { - element: , + element: ( + + + + ), children: children, }, {