React routerによる認証時のにリロードした際のルーティング

Question

#現在やっていること
React Typescript laravel styled-componentsでtodoリストのポートフォリオを作成しています

#解決したいこと
ログイン時と非ログイン時でガードのようなものをしてリロードしてもログイン状態を維持するようにプログラムしているのですが、ログイン状態でhome以外のページでリロードを行うとhomeにリダイレクトしてしまいます。ログイン時のそのページがそのまま表示されてほしいです

#考えられそうな原因
ログイン状態の取得はリロードする度にlaravelにapiで問い合わせており、ログインしていなかったらログイン画面に、逆にログインしているのにログイン画面にアクセスしようとしたらhomeにリダイレクトするようにガードで実現しています。コンソールで見ている感じ何回もログイン情報を取りに行っているため、この２つを行き来している可能性があるのですがどうすればリダイレクト前に確実にログイン情報を手に入れられるのかよく分かりません。これが原因かは分かりませんが、自分の考えだけ載せておきます

どなたかリロードした際にそのままのページが表示されるやり方を教えていただけると助かります。

ComponentRouter.tsx

import { VFC } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import styled from "styled-components";

import { Login } from "../components/pages/Login";
import { Home } from "../components/pages/logined/Home";
import { Top } from "../components/pages/Top";
import { Register } from "../components/pages/Register";
import { AuthRoute } from "./AuthRoute";
import { GuestRoute } from "./GuestRoute";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import { LoginedLayout } from "../components/templates/LoginedLayout";
import { AddGroup } from "../components/pages/logined/action/AddGroup";
import { Quadrant } from "../components/pages/logined/Quadrant";
import { Group } from "../components/pages/logined/Group";
import { Edit } from "../components/pages/logined/action/Edit";
import { Help } from "../components/pages/Help";
import { path } from "../assets/data/path";
import { AddTask } from "../components/pages/logined/action/AddTask";
import { ActionLayout } from "../components/templates/ActionLayout";

export const ComponentRouter: VFC = () => {
    return (
        <SComponentContainer>
            <BrowserRouter>
                <Switch>
                    <Route exact path={path.top}>
                        <DefaultLayout>
                            <Top />
                        </DefaultLayout>
                    </Route>
                    <Route path={path.help}>
                        <DefaultLayout>
                            <Help />
                        </DefaultLayout>
                    </Route>
                    <GuestRoute path={path.login}>
                        <DefaultLayout>
                            <Login />
                        </DefaultLayout>
                    </GuestRoute>
                    <GuestRoute path={path.register}>
                        <DefaultLayout>
                            <Register />
                        </DefaultLayout>
                    </GuestRoute>

                    <AuthRoute path={path.home}>
                        <LoginedLayout>
                            <Home />
                        </LoginedLayout>
                    </AuthRoute>
                    <AuthRoute path={path.quadrant}>
                        <LoginedLayout>
                            <Quadrant />
                        </LoginedLayout>
                    </AuthRoute>
                    <AuthRoute path={path.group}>
                        <LoginedLayout>
                            <Group />
                        </LoginedLayout>
                    </AuthRoute>

                    <AuthRoute path={path.edit}>
                        <ActionLayout>
                            <Edit />
                        </ActionLayout>
                    </AuthRoute>
                    <AuthRoute path={path.addgroup}>
                        <ActionLayout>
                            <AddGroup />
                        </ActionLayout>
                    </AuthRoute>
                    <AuthRoute path={path.addtask}>
                        <ActionLayout>
                            <AddTask />
                        </ActionLayout>
                    </AuthRoute>

                    <Route path="*">
                        <Redirect to={{ pathname: path.top }} />
                    </Route>
                </Switch>
            </BrowserRouter>
        </SComponentContainer>
    );
};

const SComponentContainer = styled.div`
    //色の指定
    color: white;
    background-color: #423c3c;
`;

AuthRoute.tsx

import React, { VFC } from "react";
import { Route, Redirect } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";
import { useAuthContext } from "../providers/AuthProvider";

type propsType = {
    path: string;
    children: React.ReactNode;
};

export const AuthRoute: VFC<propsType> = (props) => {
    const { isLogin } = useAuthContext();
    useAuth();
    const { path, children } = props;
    return (
        <Route
            path={path}
            render={({ location }) =>
                isLogin ? (
                    children
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: location },
                        }}
                    />
                )
            }
        />
    );
};

GuestRoute.tsx

import React, { VFC } from "react";
import { Route, Redirect } from "react-router-dom";
import { useAuthContext } from "../providers/AuthProvider";

type propsType = {
    path: string;
    children: React.ReactNode;
};

export const GuestRoute: VFC<propsType> = (props) => {
    const { isLogin } = useAuthContext();
    const { path, children } = props;
    return (
        <Route
            path={path}
            render={({ location }) =>
                isLogin ? (
                    <Redirect
                        to={{
                            pathname: "/home",
                            state: { from: location },
                        }}
                    />
                ) : (
                    children
                )
            }
        />
    );
};

useAuth.tsx

import { useAuthContext } from "../providers/AuthProvider";
import axios from "axios";

export const useAuth = async () => {
    const { setIsLogin } = useAuthContext();
    try {
        const res = await axios.get("/api/auth");
        setIsLogin(res.data.isLogin);
        console.log("useAuth:ログイン情報を取得しisLoginセットしました");
    } catch (error) {
        console.log("useAuth:ログイン情報が取得出来ませんでした");
    }
};

追記

import React, { createContext, useContext, useState, VFC } from "react";

const AuthContext = createContext(
    {} as {
        isLogin: boolean;
        setIsLogin: React.Dispatch<React.SetStateAction<boolean>>;
    }
);

type propsType = {
    children: React.ReactElement;
};

export const AuthProvider: VFC<propsType> = (props) => {
    const { children } = props;
    const [isLogin, setIsLogin] = useState<boolean>(false);
    return (
        <AuthContext.Provider value={{ isLogin, setIsLogin }}>
            {children}
        </AuthContext.Provider>
    );
};

export const useAuthContext = () => {
    return useContext(AuthContext);
};

Comments

[退会済みユーザー]

providers/AuthProvider のソースコードも追記いただけると対策が見えやすいかもしれません。

[it-tsumugi]

追記しました。

[退会済みユーザー]

おおきにです〜。回答しました。

[hoshi-takanori]

リロードすると isLogin の初期状態は false で、ログインが必要な画面の場合、AuthRoute でいったん /login にリダイレクトされます。その後 /api/auth の結果が帰ってきて isLogin が true になると /home に飛ばされるのでしょう。
また、何回もログイン情報を取りに行っているのは、ログインが必要な画面に切り替わるたびに AuthRoute でログイン情報を取得しているからですね。

Answer 1

ログインしたかどうかの状態を追加することでなんとかなりました

Answer 2

一案を回答します。

• 解決策： isLoginをlocalStorageに永続化する。すなわちsetStateするときはlocalStorageにも保存し、読むときは、localStorageに保存してあればその値を優先的に使う。

• 簡単な例 (で考え方を説明する記事)： Persisting State in React Apps

• 質問のコードへの実装例： 上記の記事からリンクされているuseLocalStorage　を使って

- const [isLogin, setIsLogin] = useState<boolean>(false);
+ const [isLogin, setIsLogin] = useLocalStorage('isLogin', false);

とする。（ただし、useLocalStorage　のコードはJSなのでTSで使うと型のエラーや警告が出るかもしれないので、その場合は適宜対応）

• useLocalStorage を使うのは一手段に過ぎないので、他のライブラリを探すか自分で書いてもよいかと思います。

Comments

[it-tsumugi]

セッションで管理しているのでlocalStrageに保存したくないのです。XSSなどの対策も考えて