Control de acceso basado en roles (RBAC)
Modele los roles y permisos de los usuarios, almacénelos en la sesión y aplique comprobaciones de roles en componentes del servidor, gestores de rutas y middleware de una aplicación Next.js 15.
Control de acceso basado en roles (RBAC) es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Authorization Beyond Login
Authentication answers who are you; authorization answers what may you do. Role-Based Access Control (RBAC) assigns each user one or more roles and grants permissions to roles instead of individuals.
- Roles:
admin,editor,viewer - Permissions are derived from the role.
Storing the Role in the JWT
With NextAuth, attach the role to the token in the jwt callback so it travels with every request without a database hit.
callbacks: {
async jwt({ token, user }) {
if (user) token.role = user.role;
return token;
},
async session({ session, token }) {
session.user.role = token.role;
return session;
},
}A Permissions Map
Centralize what each role can do. A simple map keeps checks consistent and easy to audit.
export const permissions = {
admin: ['read', 'write', 'delete'],
editor: ['read', 'write'],
viewer: ['read'],
};
export function can(role, action) {
return permissions[role]?.includes(action) ?? false;
}Testing the Helper
The can helper is pure logic, so it runs anywhere. Here is a self-contained check.
const permissions = {
admin: ['read', 'write', 'delete'],
editor: ['read', 'write'],
viewer: ['read'],
};
function can(role, action) {
return permissions[role]?.includes(action) ?? false;
}
console.log(can('editor', 'write'));
console.log(can('viewer', 'delete'));Guarding a Server Component
Read the session on the server and redirect users who lack the required role before any sensitive UI renders.
import { auth } from '@/auth';
import { redirect } from 'next/navigation';
export default async function AdminPage() {
const session = await auth();
if (session?.user.role !== 'admin') redirect('/');
return <h1>Admin Dashboard</h1>;
}Guarding a Route Handler
API route handlers must enforce roles too. Never trust the client. Return 403 when the role is insufficient.
import { auth } from '@/auth';
import { can } from '@/lib/rbac';
export async function DELETE(req) {
const session = await auth();
if (!can(session?.user.role, 'delete')) {
return new Response('Forbidden', { status: 403 });
}
return Response.json({ ok: true });
}Role Checks in Middleware
Middleware can block whole route groups early. Match an admin prefix and verify the token's role.
import { NextResponse } from 'next/server';
export function middleware(req) {
const role = req.cookies.get('role')?.value;
if (req.nextUrl.pathname.startsWith('/admin') && role !== 'admin') {
return NextResponse.redirect(new URL('/login', req.url));
}
return NextResponse.next();
}
export const config = { matcher: ['/admin/:path*'] };Defense in Depth
Apply checks at multiple layers. Middleware gives a fast first gate, but always re-verify in the server component or route handler that actually touches data.
- Middleware: coarse routing gate.
- Server component / handler: authoritative check.
Hiding UI Conditionally
Hide controls users cannot use, but remember UI hiding is convenience, not security. The server must still reject unauthorized actions.
export default async function Toolbar() {
const session = await auth();
return (
<div>
{can(session?.user.role, 'delete') && <DeleteButton />}
</div>
);
}Multiple Roles and Scopes
Real apps often give a user several roles or fine-grained scopes. Store an array and check membership. This scales toward permission-based (ABAC) systems later.
function hasRole(userRoles, required) {
return userRoles.some((r) => r === required);
}
console.log(hasRole(['editor', 'viewer'], 'editor'));Common Pitfalls
Avoid these RBAC mistakes:
- Trusting a role sent from the client body.
- Checking roles only in the UI.
- Forgetting to re-issue the JWT after a role change.
- Hardcoding role strings instead of a central map.
Quick Check
Where is the authoritative place to enforce that only admins can delete a record?
Recap
You implemented RBAC end to end:
- Stored the role in the JWT and session via NextAuth callbacks.
- Centralized permissions with a
can()helper. - Guarded server components, route handlers, and middleware.
- Applied defense in depth and avoided client-trust pitfalls.
Preguntas frecuentes
¿La lección «Control de acceso basado en roles (RBAC)» es gratis?
Sí — el texto completo de «Control de acceso basado en roles (RBAC)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
¿Qué aprenderé en «Control de acceso basado en roles (RBAC)»?
Modele los roles y permisos de los usuarios, almacénelos en la sesión y aplique comprobaciones de roles en componentes del servidor, gestores de rutas y middleware de una aplicación Next.js 15. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?
No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Control de acceso basado en roles (RBAC)»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?
Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Integración de NextAuth.js
- Gestión de sesiones y JWT
- Middleware y control de acceso
- Control de acceso basado en roles (RBAC)