Authentification basée sur les rôles dans MERN Stack : un guide complet

L'authentification est un aspect crucial des applications Web, garantissant que seuls les utilisateurs autorisés peuvent accéder à certaines ressources. L'authentification basée sur les rôles (RBAC) va encore plus loin en attribuant différentes autorisations aux utilisateurs en fonction de leurs rôles.

Dans cet article, nous aborderons :
✅ Qu'est-ce que l'authentification basée sur les rôles ?
✅ Pourquoi utiliser l'authentification basée sur les rôles ?
✅ Comment implémenter RBAC dans une application MERN Stack

Qu'est-ce que l'authentification basée sur les rôles ?
Le contrôle d'accès basé sur les rôles (RBAC) est une approche de sécurité dans laquelle les utilisateurs se voient attribuer des rôles et chaque rôle dispose d'autorisations spécifiques.

Par exemple, dans une application e-commerce :

L'administrateur peut ajouter, modifier ou supprimer des produits.
Le vendeur peut gérer ses propres produits.
Le client ne peut voir et acheter que des produits.
Cela garantit que les utilisateurs ne peuvent effectuer que des actions pertinentes pour leurs rôles.

Pourquoi utiliser l'authentification basée sur les rôles ?
✔ Sécurité améliorée – Empêche l'accès non autorisé aux opérations sensibles.
✔ Évolutivité – Ajoutez facilement de nouveaux rôles et autorisations à mesure que le système se développe.
✔ Meilleure gestion des utilisateurs – Attribuez des autorisations sans modifier le code.

Comment implémenter RBAC dans une application MERN Stack ?
1️⃣ Configuration du modèle utilisateur (MongoDB Mongoose)
Dans vos models/user.model.js :

javascript
Copier le code
const mangouste = require("mangouste");

const UserSchema = new mangouste.Schema({
nom d'utilisateur : { type : chaîne, obligatoire : vrai, unique : vrai },
email : { type : Chaîne, obligatoire : vrai, unique : vrai },
mot de passe : { type : Chaîne, obligatoire : vrai },
rôle : {
tapez : chaîne,
énumération : ["admin", "vendeur", "client"],
par défaut : "client"
>
});

module.exports = mongoose.model("Utilisateur", UserSchema);
? Ici, chaque utilisateur dispose d'un champ de rôle, qui détermine ses autorisations.

2️⃣ Génération de jetons JWT pour l'authentification
Dans vos contrôleurs/auth.controller.js :

javascript
Copier le code
const jwt = require("jsonwebtoken");
const Utilisateur = require("../models/user.model");

const login = async (req, res) => {
const { email, mot de passe } = req.body;
const user = attendre User.findOne({ email });

if (!user || user.password !== mot de passe) {
return res.status(401).json({ message : "Informations d'identification invalides" });
>

const token = jwt.sign({ userId: user._id, role: user.role }, "SECRET_KEY", { expiresIn: "1h" });

res.json({ jeton, rôle : user.role });
};

module.exports = { connexion };
? Cette fonction génère un jeton JWT contenant le rôle de l'utilisateur.

3️⃣ Création d'un middleware pour restreindre l'accès
Dans middlewares/auth.middleware.js :

javascript
Copier le code
const jwt = require("jsonwebtoken");

constauthentifier = (req, res, next) => {
const token = req.header("Autorisation")?.split(" ")[1];

if (!token) return res.status(403).json({ message : "Accès refusé" });

essayez {
const décodé = jwt.verify(token, "SECRET_KEY");
req.user = décodé;
suivant();
} attraper (erreur) {
res.status(401).json({ message : "Jeton invalide" });
>
};

const autoriser = (rôles) => {
return (req, res, next) => {
if (!roles.includes(req.user.role)) {
return res.status(403).json({ message : "Interdit" });
>
suivant();
};
};

module.exports = {authentifier, autoriser};
? authentifier – Garantit que seuls les utilisateurs connectés peuvent accéder aux itinéraires.
? autoriser – Restreint l'accès en fonction des rôles.

4️⃣ Protection des itinéraires en fonction des rôles des utilisateurs
Dans routes/admin.routes.js :

javascript
Copier le code
const express = require("express");
const {authentifier, autoriser } = require("../middlewares/auth.middleware");

const router = express.Router();

router.get("/admin-dashboard", authentifier, autoriser(["admin"]), (req, res) => {
res.json({ message : "Bienvenue dans le tableau de bord d'administration" });
});

module.exports = routeur;
? Seuls les utilisateurs dotés du rôle d'administrateur peuvent accéder à /admin-dashboard.

5️⃣ Implémentation d'une interface utilisateur basée sur les rôles dans React
Dans App.js (Frontend) :

javascript
Copier le code
importer { useState, useEffect } depuis "react";
importer des axios depuis "axios" ;

const App = () => {
const [role, setRole] = useState(null);

useEffect(() => {
const token = localStorage.getItem("token");
si (jeton) {
const décodé = JSON.parse(atob(token.split(".")[1]));
setRole(decoded.role);
>
}, []);

retour (

Bienvenue dans l'authentification basée sur les rôles MERN

{role === "admin" && Tableau de bord d'administration}
{role === "vendeur" && Tableau de bord du vendeur}
{role === "client" && Tableau de bord client}

);
} ;

exporter l'application par défaut ;
? L'interface utilisateur affiche différents tableaux de bord en fonction du rôle de l'utilisateur.

Conclusion
L'authentification basée sur les rôles est une mesure de sécurité essentielle dans les applications Web modernes. En implémentant RBAC dans MERN Stack, vous pouvez contrôler efficacement les autorisations des utilisateurs.

? Prochaines étapes :
? Ajoutez un panneau de gestion des rôles pour les administrateurs.
? Implémentez le cryptage de la base de données pour les mots de passe.
? Utilisez les jetons d'actualisation pour une meilleure sécurité.

Vous voulez en savoir plus ? Posez vos questions dans les commentaires ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!