MERN 스택의 역할 기반 인증: 전체 가이드-JS 튜토리얼-php.cn

MERN 스택의 역할 기반 인증: 전체 가이드

Susan Sarandon

풀어 주다： 2025-01-10 22:39:42

원래의

330명이 탐색했습니다.

Role-Based Authentication in MERN Stack: A Complete Guide

인증은 승인된 사용자만 특정 리소스에 액세스할 수 있도록 보장하는 웹 애플리케이션의 중요한 측면입니다. 역할 기반 인증(RBAC)은 역할에 따라 사용자에게 다양한 권한을 할당하여 이를 한 단계 더 발전시킵니다.

이 게시물에서 다룰 내용은 다음과 같습니다.
✅ 역할 기반 인증이란 무엇인가요?
✅ 역할 기반 인증을 사용하는 이유는 무엇인가요?
✅ MERN 스택 애플리케이션에서 RBAC를 구현하는 방법

역할 기반 인증이란 무엇입니까?
RBAC(역할 기반 액세스 제어)는 사용자에게 역할이 할당되고 각 역할에는 특정 권한이 있는 보안 접근 방식입니다.

예를 들어 전자상거래 애플리케이션에서는 다음과 같습니다.

관리자는 상품을 추가, 수정, 삭제할 수 있습니다.
판매자가 직접 상품을 관리할 수 있습니다.
고객은 상품보기 및 구매만 가능합니다.
이를 통해 사용자는 자신의 역할과 관련된 작업만 수행할 수 있습니다.

역할 기반 인증을 사용하는 이유
✔ 강화된 보안 – 민감한 작업에 대한 무단 액세스를 방지합니다.
✔ 확장성 – 시스템이 성장함에 따라 새로운 역할과 권한을 쉽게 추가할 수 있습니다.
✔ 더 나은 사용자 관리 – 코드 수정 없이 권한을 할당합니다.

MERN 스택 애플리케이션에서 RBAC를 구현하는 방법은 무엇입니까?
1️⃣ 사용자 모델 설정(MongoDB Mongoose)
귀하의 models/user.model.js에서:

자바스크립트
코드 복사
const 몽구스 = require("몽구스");

const UserSchema = new mongoose.Schema({
사용자 이름: { 유형: 문자열, 필수: true, 고유: true },
이메일: { 유형: 문자열, 필수: true, 고유: true },
비밀번호: { 유형: 문자열, 필수: true },
역할: {
유형: 문자열,
열거형: ["관리자", "판매자", "고객"],
기본값: "고객"
}
});

module.exports = mongoose.model("사용자", UserSchema);
? 여기에서 각 사용자에게는 자신의 권한을 결정하는 역할 필드가 있습니다.

2️⃣ 인증을 위한 JWT 토큰 생성
컨트롤러/auth.controller.js에서:

자바스크립트
코드 복사
const jwt = require("jsonwebtoken");
const 사용자 = require("../models/user.model");

const 로그인 = 비동기(req, res) => {
const { 이메일, 비밀번호 } = req.body;
const 사용자 = User.findOne({ 이메일 })을 기다립니다.

if (!user || user.password !== 비밀번호) {
return res.status(401).json({ 메시지: "잘못된 자격 증명" });
}

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

res.json({ 토큰, 역할: user.role });
};

module.exports = { 로그인 };
? 이 함수는 사용자의 역할이 포함된 JWT 토큰을 생성합니다.

3️⃣ 액세스를 제한하는 미들웨어 생성
middlewares/auth.middleware.js:

자바스크립트
코드 복사
const jwt = require("jsonwebtoken");

const authenticate = (req, res, next) => {
const 토큰 = req.header("Authorization")?.split(" ")[1];

if (!token) return res.status(403).json({ 메시지: "액세스 거부됨" });

해 보세요 {
const decoded = jwt.verify(token, "SECRET_KEY");
req.user = 디코딩됨;
다음();
} 잡기(오류) {
res.status(401).json({ 메시지: "잘못된 토큰" });
}
};

const 승인 = (역할) => {
return (req, res, next) => {
if (!roles.includes(req.user.role)) {
return res.status(403).json({ message: "Forbidden" });
}
다음();
};
};

module.exports = { 인증, 승인 };
? 인증 – 로그인한 사용자만 경로에 액세스할 수 있도록 합니다.
? Authorize – 역할에 따라 액세스를 제한합니다.

4️⃣ 사용자 역할에 따른 경로 보호
경로/admin.routes.js에서:

자바스크립트
코드 복사
const express = require("express");
const { 인증, 승인 } = require("../middlewares/auth.middleware");

const 라우터 = express.Router();

router.get("/admin-dashboard", authenticate, Authorize(["admin"]), (req, res) => {
res.json({ 메시지: "관리 대시보드에 오신 것을 환영합니다" });
});

module.exports = 라우터;
? 관리자 역할을 가진 사용자만 /admin-dashboard에 액세스할 수 있습니다.

5️⃣ React에서 역할 기반 UI 구현
App.js(프런트엔드):

자바스크립트
코드 복사
"react"에서 import { useState, useEffect };
"axios"에서 axios 가져오기;

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

useEffect(() => {
const 토큰 = localStorage.getItem("token");
if (토큰) {
const decoded = JSON.parse(atob(token.split(".")[1]));
setRole(decoded.role);
}
}, []);

반품(