🔐 Gérer les permissions dans une application React

Lorsque vous développez une application React avec différents rôles utilisateurs — comme les administrateurs, éditeurs, ou utilisateurs standards — la gestion des permissions devient un élément essentiel de votre architecture. Elle permet de contrôler ce que chaque utilisateur peut voir ou faire, tout en assurant une expérience fluide et sécurisée.

Il existe plusieurs approches pour gérer les permissions dans les applications. Examinons les plus courantes et comparons-les.

1. Conditions codées en dur dans les composants

On peut être tenté de faire des contrôles à la dure

{user.role === 'admin' && <AdminPanel />}

✅ Fonctionnera pour une petite app.
❌ Devient difficile à maintenir dès que les fonctionnalités ou les rôles se complexifient.

2. Contrôle d'accès basé sur les rôles (RBAC: Role Based Access Control)

Les utilisateurs ont un rôle, et chaque rôle donne accès à certains écrans ou actions.

const roles = {
  admin: ['dashboard', 'users', 'settings'],
  editor: ['dashboard', 'posts'],
};
const user = { role: 'editor' };

function canAccess(user: string, ui: string) {
  return roles[user.role].includes(ui);
}

// contrôle pour accéder à un UI
const isAuthorized = canAccess(user, 'posts')

✅ Plus propre que les conditions en dur.
❌ Limité quand il faut gérer des permissions très spécifiques (ex. : "peut suspendre un utilisateur", "peut approuver un événement").

3. Contrôle d'accès basé sur les attributs (ABAC: Attribute Based Access Control)

Les décisions sont basées sur plusieurs attributs (type d’utilisateur, état d’une ressource, etc.).
✅ Très flexible pour les applications complexes.
❌ Peut être lourd à implémenter, complexe à maintenir pour la majorité des cas d’usage dans React.

type User = {
  id: string;
  role: 'admin' | 'editor' | 'viewer';
};

type Document = {
  id: string;
  ownerId: string;
  status: 'draft' | 'pending' | 'approved';
};

// l'utilisateur peut approver un document si il est admin et n'est pas l'auteur et 
// que le document a le status 'pending'
function canApproveDocument(user: User, doc: Document) {
  return (
    user.role === 'admin' &&
    doc.status === 'pending' &&
    doc.ownerId !== user.id
  );
}

// utilisation dans un composant
function ApproveDocument({ user, doc}: { user: User; doc: Document }) {

  if (!canApproveDocument(user, doc)) return null;

  return <button onClick={() => approve(doc.id)}>Approuver</button>;
}

           [ user ]
               ↓
        ┌──────────────┐
        │  role: admin │
        │  id: U123    │
        └──────────────┘

           [ document ]
               ↓
     ┌─────────────────────┐
     │  status: pending    │
     │  ownerId: U456      │
     └─────────────────────┘

       Rule: admin AND pending AND not owner

4. Listes de contrôle d’accès (ACL: Access Control List)

Les permissions sont regroupées par section ou module, et chaque action est explicitement définie.

// utils/permissions.ts

// Définition des permissions disponibles par section (UI)
export const ACL = Object.freeze({
  dashboard: ['view_stats', 'export_reports'],
  inventory: ['add_product', 'remove_product'],
  team: ['invite_member', 'edit_roles'],
  billing: ['view_invoices', 'update_payment_method'],
} as const);

// Fonction utilitaire : vérifie si l'utilisateur a accès à une action dans une section donnée
export function hasAccess(
  section: keyof typeof ACL,
  action: string,
  userPermissions: string[]
): boolean {
  return ACL[section].includes(action) && userPermissions.includes(action);
}

// Exemple d'utilisation (dans un composant React ou autre module)
const currentUserPermissions = [
  'view_stats',
  'add_product',
  'remove_product',
  'invite_member',
];

const canRemoveProduct = hasAccess('inventory', 'remove_product', currentUserPermissions);
// Résultat : true

✅ Centralisé, flexible et indiqué pour les applications comme : CRM, outils de gestions etc …
❌ Les ACL fonctionnent généralement au niveau d’un module ou d’une interface (ex. : can_edit_posts), mais ne permettent pas de gérer des règles plus fines, comme l’accès à une ressource spécifique (ex. : can_edit_post_123).

La gestion des permissions est un enjeu crucial dans le développement d’applications professionnelles. Le choix de l’approche dépendra :

• de la complexité de l’application,

• du contexte et des enjeux

• du niveau de contrôle nécessaire,

• de la facilité de maintenance à long terme.