👤 Autorización basada en roles

20 - 👤 Autorización basada en roles

Aprende a controlar el acceso a ciertas secciones de tu aplicación Next.js según el rol del usuario.

---

🔑 ¿Qué es la autorización basada en roles?

La autorización basada en roles permite definir qué usuarios pueden acceder a determinadas rutas o funcionalidades de la aplicación según su rol. Comúnmente se usa junto a NextAuth.js para validar sesiones y permisos.

---

⚙️ Ejemplo de roles en la sesión

Supongamos que guardamos el rol del usuario en la sesión al iniciar sesión:

{
  user: {
    name: "Juan",
    email: "juan@correo.com",
    role: "admin" // roles posibles: admin, editor, visitante
  }
}
      

---

🛡️ Middleware para autorización por roles

Podemos crear un middleware que bloquee rutas según el rol:

// 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();

  // Redirigir si no está autenticado
  if (!token) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }

  // Bloquear acceso si no es admin
  if (url.pathname.startsWith("/admin") && token.role !== "admin") {
    url.pathname = "/unauthorized";
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/admin/:path*", "/dashboard/:path*"]
};
      

💡 Explicación:

• Se verifica el token de la sesión con getToken.
• Si el usuario intenta acceder a /admin y no tiene rol admin, se redirige a /unauthorized.
• El matcher define las rutas donde se aplica esta protección.

---

🖥️ Protección de componentes según rol

Además, en el frontend podemos condicionar la renderización:

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

export default function AdminPanel() {
  const { data: session } = useSession();

  if (!session) return <p>Cargando...</p>;

  if (session.user.role !== "admin") return <p>No tienes permisos para acceder.</p>;

  return (
    <div>
      <h1>Panel de Administración</h1>
      <p>Bienvenido, {session.user.name}</p>
    </div>
  );
}
      

💡 Combinando Middleware y validaciones en componentes, aseguramos que sólo usuarios con el rol correcto puedan acceder.

---

✅ Resumen

• 👤 La autorización por roles controla el acceso a rutas y funcionalidades según el rol del usuario.
• 🛡️ Middleware + Frontend garantiza seguridad completa.
• ⚡ Roles comunes: admin, editor, visitante.
• 🔗 Siempre redirige o muestra mensaje de acceso denegado a quienes no cumplan los permisos.

← Volver al índice