0Pricing
Next.js 15 Fullstack Web Apps · Leçon

Contrôle d’accès fondé sur les rôles (RBAC)

Modélisez les rôles et les autorisations des utilisateurs, stockez-les dans la session et appliquez les vérifications de rôle aux composants serveur, aux gestionnaires de routes et aux intergiciels d’une application Next.js 15.

Contrôle d’accès fondé sur les rôles (RBAC) est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Contrôle d’accès fondé sur les rôles (RBAC) » est-elle gratuite ?

Oui — le texte complet de « Contrôle d’accès fondé sur les rôles (RBAC) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Contrôle d’accès fondé sur les rôles (RBAC) » ?

Modélisez les rôles et les autorisations des utilisateurs, stockez-les dans la session et appliquez les vérifications de rôle aux composants serveur, aux gestionnaires de routes et aux intergiciels d… Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Contrôle d’accès fondé sur les rôles (RBAC) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Intégrer NextAuth.js
  2. Gestion des sessions et JWT
  3. Intergiciel et contrôle d’accès
  4. Contrôle d’accès fondé sur les rôles (RBAC)
← Retour à Next.js 15 Fullstack Web Apps