🛡️ Middlewares y protección de rutas

19 - 🛡️ Middlewares y protección de rutas

Aprende a proteger rutas y aplicar lógica personalizada en tu aplicación Next.js usando Middlewares.

---

🔍 ¿Qué es un Middleware en Next.js?

Los Middlewares son funciones que se ejecutan antes de que una solicitud llegue a la ruta final. Permiten:

• Redirigir usuarios no autenticados.
• Bloquear o modificar rutas según condiciones.
• Aplicar lógica de seguridad y validación.

💡 Los Middlewares en Next.js funcionan en Edge Runtime, ejecutándose de manera rápida y cercana al usuario.

---

⚙️ Crear un Middleware básico

Crea un archivo middleware.js en la raíz del proyecto:

// middleware.js
import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";

export async function middleware(req) {
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
  const url = req.nextUrl.clone();

  // Si no hay token y se accede a rutas protegidas
  if (!token && url.pathname.startsWith("/dashboard")) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }

  // Si hay token, permitir acceso
  return NextResponse.next();
}

// Rutas donde se aplica el middleware
export const config = {
  matcher: ["/dashboard/:path*"]
};
      

💡 Explicación:

• getToken: Recupera el token JWT de la sesión del usuario.
• NextResponse.redirect: Redirige a otra página si no cumple la condición.
• matcher: Define las rutas donde se aplica el middleware.

---

🖥️ Protección de rutas en componentes

Aun con middleware, en el frontend podemos condicionar la renderización según la sesión:

import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Dashboard() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  if (status === "loading") return <p>Cargando...</p>;

  return (
    <div>
      <h1>Dashboard protegido</h1>
      <p>Bienvenido, {session.user.name}</p>
    </div>
  );
}
      

💡 Combinando Middleware + Frontend, garantizamos protección completa y seguridad en nuestras rutas.

---

✅ Resumen

• 🛡️ Middleware permite ejecutar lógica antes de acceder a rutas protegidas.
• 🔗 Se puede combinar con NextAuth.js para validar sesiones y roles.
• ⚡ El matcher define las rutas donde aplicar la protección.
• 💻 En el frontend se puede reforzar la protección usando useSession y redirecciones.

← Volver al índice