ログイン状態によるアクセス制限について
解決したいこと
ログイン状態によってアクセスできるページを制限する機能を実装しています。
┣ログイン時:制限なし
┗ログアウト時:/login /signup 以外のページにアクセスしたら /loginへリダイレクト
ひととおりの動作は実装できています。
ですがログアウト中に制限のかかったページからログインページへリダイレクトする際に一旦リダイレクト前のページが表示されてからリダイレクトが実行されます。
実現したいこと
リダイレクト前のページを見せることなくリダイレクトさせるにはどうしたらいいでしょうか
該当するソースコード
"use client";
import { useRouter, usePathname } from "next/navigation";
import { useAuthContext } from "../context/AuthContext";
import { useEffect, useState } from "react";
const PrivateRoute = ({ children, allowedRouters = [] }) => {
const router = useRouter();
const { user } = useAuthContext();
const pathname = usePathname();
useEffect(() => {
if (!user && !allowedRouters.includes(pathname)) {
router.push("/login");
}
}, [user, pathname]);
return <>{children}</>;
};
export default PrivateRoute;
自分で試したこと
以下のようにloadingという変数で状態管理をしてみたのですが、これが動く前にリロード前のページが表示されてしまいました
const [loading, setLoading] = useState(true);
// 略
setLoading(false);
// 略
if (loading) {
return <p>loading...</p>;
} else {
return <>{children}</>;
}