MERN スタックのロールベース認証: 完全ガイド-jsチュートリアル-php.cn

MERN スタックのロールベース認証: 完全ガイド

Susan Sarandon

リリース： 2025-01-10 22:39:42

オリジナル

331 人が閲覧しました

Role-Based Authentication in MERN Stack: A Complete Guide

認証は Web アプリケーションの重要な側面であり、許可されたユーザーのみが特定のリソースにアクセスできるようにします。ロールベース認証 (RBAC) は、これをさらに一歩進めて、ロールに基づいてユーザーに異なる権限を割り当てます。

この投稿では以下について説明します:
✅ ロールベース認証とは何ですか?
✅ ロールベースの認証を使用する理由
✅ MERN スタックアプリケーションに RBAC を実装する方法

ロールベース認証とは何ですか?
ロールベースのアクセス制御 (RBAC) は、ユーザーにロールが割り当てられ、各ロールに特定の権限が与えられるセキュリティアプローチです。

たとえば、電子商取引アプリケーションでは次のようになります。

管理者は製品を追加、編集、削除できます。
販売者は自分の商品を管理できます。
お客様は商品の閲覧と購入のみが可能です。
これにより、ユーザーは自分の役割に関連するアクションのみを実行できるようになります。

ロールベースの認証を使用する理由
✔ セキュリティの強化 – 機密性の高い操作への不正アクセスを防ぎます。
✔ スケーラビリティ – システムの成長に合わせて、新しいロールと権限を簡単に追加できます。
✔ より良いユーザー管理 – コードを変更せずに権限を割り当てます。

MERN スタックアプリケーションに RBAC を実装するにはどうすればよいですか?
1️⃣ ユーザーモデルのセットアップ (MongoDB Mongoose)
models/user.model.js 内:

JavaScript
コードをコピー
const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
ユーザー名: { タイプ: 文字列、必須: true、一意: true }、
電子メール: { タイプ: 文字列、必須: true、一意: true }、
パスワード: { タイプ: 文字列、必須: true },
役割: {
タイプ: 文字列、
列挙型: ["管理者", "販売者", "顧客"],
デフォルト: "顧客"
}
});

module.exports = mongoose.model("User", UserSchema);
?ここで、各ユーザーには役割フィールドがあり、これによって権限が決定されます。

2️⃣ 認証用の JWT トークンの生成
あなたのcontrollers/auth.controller.js内:

JavaScript
コードをコピー
const jwt = require("jsonwebtoken");
const User = require("../models/user.model");

const login = async (req, res) => {
const {メールアドレス、パスワード} = req.body;
const user = await User.findOne({ email });

if (!user || user.password !== パスワード) {
return res.status(401).json({ メッセージ: "無効な資格情報" });
}

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

res.json({ トークン, ロール: user.role });
};

module.exports = { ログイン };
?この関数は、ユーザーのロールを含む JWT トークンを生成します。

3️⃣ アクセスを制限するミドルウェアの作成
middlewares/auth.middleware.js:

JavaScript
コードをコピー
const jwt = require("jsonwebtoken");

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

if (!token) return res.status(403).json({ メッセージ: "アクセスが拒否されました" });

{
を試してください const デコード = jwt.verify(token, "SECRET_KEY");
req.user = デコードされました;
next();
} キャッチ (エラー) {
res.status(401).json({ メッセージ: "無効なトークン" });
}
};

const authorize = (ロール) => {
return (req, res, next) => {
if (!roles.includes(req.user.role)) {
return res.status(403).json({ メッセージ: "禁止" });
}
next();
};
};

module.exports = { 認証、認可 };
?認証 – ログインしているユーザーのみがルートにアクセスできるようにします。
? authorize – ロールに基づいてアクセスを制限します。

4️⃣ ユーザーの役割に基づいたルートの保護
Routes/admin.routes.js:

JavaScript
コードをコピー
const Express = require("express");
const { 認証、認可 } = require("../middlewares/auth.middleware");

const router =express.Router();

router.get("/admin-dashboard",authenticate,authorize(["admin"]), (req, res) => {
res.json({ メッセージ: "管理者ダッシュボードへようこそ" });
});

module.exports = ルーター;
?管理者ロールを持つユーザーのみが /admin-dashboard.

にアクセスできます。

5️⃣ React でのロールベースの UI の実装
App.js (フロントエンド):

JavaScript
コードをコピー
import { useState, useEffect } from "react";
import axios from "axios";

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

useEffect(() => {
const token = localStorage.getItem("トークン");
if (トークン) {
const デコード = JSON.parse(atob(token.split(".")[1]));
setRole(decoded.role);
}
}, []);

戻る (