Estoy tratando de proteger mis páginas privadas usando HOC withAuth . La protección funciona bien, pero no quiero que los usuarios vean la carga por un segundo mientras se recupera el token de acceso del local storage . Y si simplemente devolviera null después de redirigir, obtendría un error que dice received div without enclosing div (o algo así). ¿Hay alguna forma de retrasar la transición de ruta? Mi HOC es
export function withAuth<T extends TWithAuth = TWithAuth>( WrappedComponent: React.ComponentType<T>, ): React.ComponentType<T> { const InnerComponent = (props: T) => { const [loading, setLoading] = useState(true); const router = useRouter(); useEffect(() => { const accessToken = TokenService.getAccessToken(); if (!accessToken) { router.replace('/auth/login'); } else { setLoading(false); } }, []); return loading ? <div>loading</div> : <WrappedComponent {...props} />; }; InnerComponent.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name}`; return InnerComponent;}
Tal vez pueda usar getServerSideProps en sus páginas privadas y envolverlo dentro de su componente que maneja la lógica y devolvería un
{ redirect: { destination: "/auth/login" } }si no hay token de acceso