Next.js에서 미들웨어를 활용한 역할 기반 접근 제어(RBAC) 구현

 

• Next.js 미들웨어를 활용하여 RBAC(역할 기반 접근 제어) 적용
• JWT 토큰을 검증하여 특정 페이지 접근 제한
• 관리자(Admin) 페이지와 일반 사용자 페이지를 분리하는 방법

middleware.js (RBAC 미들웨어 적용)

import { NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

const SECRET_KEY = process.env.JWT_SECRET;

export async function middleware(req) {
  const token = req.cookies.get('token');

  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  try {
    const decoded = jwt.verify(token, SECRET_KEY);

    if (req.nextUrl.pathname.startsWith('/admin') && decoded.role !== 'admin') {
      return NextResponse.redirect(new URL('/unauthorized', req.url));
    }

    return NextResponse.next();
  } catch (error) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

export const config = {
  matcher: ['/admin/:path*', '/dashboard/:path*'], // 보호할 경로 설정
};

 

app/admin/page.js (관리자 페이지)

export default function AdminPage() {
  return (
    <div>
      <h1>관리자 페이지</h1>
      <p>이 페이지는 관리자만 접근할 수 있습니다.</p>
    </div>
  );
}

 

app/unauthorized/page.js (접근 거부 페이지)

export default function Unauthorized() {
  return (
    <div>
      <h1>접근이 거부되었습니다.</h1>
      <p>이 페이지에 접근할 권한이 없습니다.</p>
    </div>
  );
}

 

Next.js 미들웨어를 활용하면 RBAC를 글로벌하게 적용 가능