import { useRouter } from "next/router"; import { useEffect } from "react"; import axios from "axios"; export default (ChildComponent) => { const composeComponent = (props) => { const router = useRouter(); const getLoggedIn = async () => { const loggedInRes = await axios.get("http://localhost:5000/api/auth"); if (loggedInRes.data === false) { router.push("/login"); } }; useEffect(() => { getLoggedIn(); }, []); return ( <div> <ChildComponent {...props} /> </div> ); }; return composeComponent; };

Hice una solicitud GET a mi back-end que devolverá un valor falso si el usuario hace clic en la ruta protegida sin estar autenticado y luego lo redirigirá a la página de inicio de sesión. Pero esta lógica sigue mostrando la ruta protegida brevemente antes de redirigir al usuario a la página de inicio de sesión. Y esta es una experiencia de usuario muy mala. Por favor, me gustaría saber cómo puedo mejorar la lógica y asegurarme de que el usuario no vea la ruta protegida en absoluto si no está autenticado y también debería ser redirigido a la ruta de inicio de sesión.