Protección de Rutas en el Cliente con NextJS 14 y Usuario de Contexto de Autenticación.
toscadev
@ ToscaDevsJS
El componenter llamado ProtectedPage se utiliza para proteger ciertas rutas en tu aplicación, donde verificamos si un usuario está autenticado antes de permitirle acceder a ciertas rutas. También veremos cómo redirigir a los usuarios no autenticados a la página de /inicio o /login.
Nota: Es importante recordar que la protección de rutas en el cliente nunca debe ser tu única línea de defensa. Siempre debes verificar la autenticación en el servidor antes de devolver datos confidenciales al cliente.
1 Creamos un componente llamado ProtectedPage.
"use client";
import React, { useEffect } from "react";
import { useRouter, usePathname } from "next/navigation";
import { useUser } from "@/context/auth-context";
const protectedToRoutes = ["/about", "/dashboard", "/console"]; // Rutas que necesitan autenticación
// Este es tu componente ProtectedPage
const ProtectedPage = ({ children }: { children: React.ReactNode }) => {
const { user } = useUser(); // --> hook personalizado userContext para obtener el usuario actual.
const router = useRouter();
const pathname = usePathname();
console.log("rutas:", pathname);
useEffect(() => {
if (!user && protectedToRoutes.includes(pathname)) router.push("/"); // Redirige al usuario a la página de inicio de sesión.
}, [user, pathname, router]);
return user ? children : null; // Si el usuario está autenticado, muestra el contenido.
};
export default ProtectedPage;
2 Ahora, en el archivo Layout.tsx, envuelve el children con el componente ProtectedPage.
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang="es">
<body className={inter.className}>
<UserContext>
<ProtectedPage>{children}</ProtectedPage>
</UserContext>
</body>
</html>
);
}
NOTAS DEL DESARROLLADOR
-Limitaciones: Es importante recordar que la protección de rutas en el cliente nunca debe ser tu única línea de defensa. Un usuario malintencionado podría manipular el código del lado del cliente para acceder a las rutas protegidas. Por lo tanto, siempre debes tener también autenticación y autorización del lado del servidor.
-Rendimiento: Dado que la verificación de autenticación se realiza en el cliente, reduces la carga en tu servidor y potencialmente puedes proporcionar una experiencia más rápida al usuario.
-Recomndación: Siempre debes verificar la autenticación en el servidor antes de devolver datos confidenciales al cliente y utiliza middleware para verificar la autenticación en el servidor antes de devolver datos confidenciales al cliente.
Si te gusto esta guía no dudes en compartirla o sugerir tu opinión. ❤️