加载下一个受保护的页面显示错误的消息，然后加载之前和加载之前

发布于 2025-01-21 16:38:57 字数 933 浏览 0 评论 0原文

考虑一个sinple next.js页面

const Index: NextPage = () => {

    const {data: session} = useSession();
    const [data, setData] = useState(null);
    const [isLoading, setLoading] = useState(false);

    useEffect(() => {
            setLoading(true)
            fetch('/api/myEndpoint')
                .then((res) => res.json())
                .then((data) => {
                    setData(data);
                    setLoading(false);
                });
    }, []);

    if(isLoading) {
        return <Spinner/>;
    }

    if(session) {
        return <p>here is my protected content</p>
    } else {
        return <p>you cant see this page</p>
    }
}

时，当我没有登录时，我会看到“您看不到此页面”，然后是旋转器，然后再次“您看不到此页面”。很好。

但是，当我登录时，我会看到“您看不到此页面”，然后是旋转器，然后看到受保护的内容。

即使我尝试

if(session && data) {

如何完全删除“您看不到此页”，直到页面完全加载？

原文

Consider a sinple next.js page like this

const Index: NextPage = () => {

    const {data: session} = useSession();
    const [data, setData] = useState(null);
    const [isLoading, setLoading] = useState(false);

    useEffect(() => {
            setLoading(true)
            fetch('/api/myEndpoint')
                .then((res) => res.json())
                .then((data) => {
                    setData(data);
                    setLoading(false);
                });
    }, []);

    if(isLoading) {
        return <Spinner/>;
    }

    if(session) {
        return <p>here is my protected content</p>
    } else {
        return <p>you cant see this page</p>
    }
}

When I am not logged in I see "you cant see this page", then the spinner, then again "you cant see this page". And that's fine.

But when I am logged in, I see "you cant see this page", then the spinner, and then the protected content.

Same thing even if I try