Next.js에 RBAC 인증을 추가하는 방법-JS 튜토리얼-php.cn

Next.js에 RBAC 인증을 추가하는 방법

DDD

풀어 주다： 2024-09-13 06:16:06

원래의

1093명이 탐색했습니다.

How to Add RBAC Authorization in Next.js

RBAC(역할 기반 액세스 제어)는 관리자가 시스템 내 역할에 따라 사용자 권한을 관리할 수 있도록 하는 최신 웹 애플리케이션의 중요한 기능입니다. Next.js 애플리케이션에서 RBAC를 구현하려면 역할 및 권한 정의, 이를 인증과 통합, 애플리케이션에서 액세스 제어 시행 등 몇 가지 주요 단계가 필요합니다. 이 가이드는 Next.js 애플리케이션에 RBAC 인증을 추가하는 과정을 안내합니다.

1. RBAC의 이해

RBAC(역할 기반 액세스 제어)는 역할에 따라 승인된 사용자에게 시스템 액세스를 제한하는 방법입니다. 역할은 일련의 권한을 정의하고 사용자에게는 관련 권한을 부여하는 역할이 할당됩니다. 예를 들어, 애플리케이션에는 관리자, 편집자, 뷰어와 같은 역할이 있을 수 있으며 각각 서로 다른 액세스 수준이 있습니다.

2. Next.js 프로젝트 설정

아직 Next.js 프로젝트를 생성하지 않았다면 먼저 만들어 보세요.

npx create-next-app@latest my-rbac-app
cd my-rbac-app

로그인 후 복사

3. 인증 추가

RBAC를 구현하기 전에 사용자를 식별할 수 있는 인증 메커니즘이 필요합니다. Next.js에는 인증이 내장되어 있지 않으므로 NextAuth.js 또는 Firebase 인증과 같은 라이브러리를 사용할 수 있습니다. NextAuth.js 설정에 대한 간략한 개요는 다음과 같습니다.

NextAuth.js 설치:

   npm install next-auth

로그인 후 복사

인증을 위한 API 경로 생성:

pages/api 디렉터리에 [...nextauth].js라는 파일을 만듭니다.

   // pages/api/auth/[...nextauth].js
   import NextAuth from 'next-auth';
   import CredentialsProvider from 'next-auth/providers/credentials';

   export default NextAuth({
     providers: [
       CredentialsProvider({
         async authorize(credentials) {
           // Here you should fetch and verify user credentials from your database
           const user = { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' };
           if (user) {
             return user;
           } else {
             return null;
           }
         }
       })
     ],
     pages: {
       signIn: '/auth/signin',
     },
     callbacks: {
       async session({ session, token }) {
         session.user.role = token.role;
         return session;
       },
       async jwt({ token, user }) {
         if (user) {
           token.role = user.role;
         }
         return token;
       }
     }
   });

로그인 후 복사

로그인 페이지 추가:

pages/auth/signin.js에서 간단한 로그인 페이지를 만드세요.

   // pages/auth/signin.js
   import { signIn } from 'next-auth/react';

   export default function SignIn() {
     return (
       <div>
         <h1>Sign In</h1>
         <button onClick={() => signIn('credentials', { redirect: false })}>
           Sign In
         </button>
       </div>
     );
   }

로그인 후 복사

4. 역할 및 권한 정의

애플리케이션에서 역할과 권한을 정의하세요. 이 작업은 중앙 구성 파일에서 수행하거나 코드 내에서 직접 수행할 수 있습니다. 역할과 권한을 정의하는 간단한 예는 다음과 같습니다.

// lib/roles.js
export const ROLES = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer',
};

export const PERMISSIONS = {
  [ROLES.ADMIN]: ['view_dashboard', 'edit_content', 'delete_content'],
  [ROLES.EDITOR]: ['view_dashboard', 'edit_content'],
  [ROLES.VIEWER]: ['view_dashboard'],
};

로그인 후 복사

5. RBAC 구현

RBAC 로직을 Next.js 페이지와 API 경로에 통합하세요. 역할에 따라 액세스를 제한하는 방법은 다음과 같습니다.

페이지 보호:

보호된 페이지를 래핑하기 위한 고차 구성 요소(HOC) 만들기:

   // lib/withAuth.js
   import { useSession, signIn } from 'next-auth/react';
   import { ROLES } from './roles';

   export function withAuth(Component, allowedRoles) {
     return function ProtectedPage(props) {
       const { data: session, status } = useSession();

       if (status === 'loading') return <p>Loading...</p>;
       if (!session || !allowedRoles.includes(session.user.role)) {
         signIn();
         return null;
       }

       return <Component {...props} />;
     };
   }

로그인 후 복사

페이지에 이 HOC를 사용하세요.

   // pages/admin.js
   import { withAuth } from '../lib/withAuth';
   import { ROLES } from '../lib/roles';

   function AdminPage() {
     return <div>Welcome, Admin!</div>;
   }

   export default withAuth(AdminPage, [ROLES.ADMIN]);

로그인 후 복사

API 경로 보호:

사용자 역할을 확인하여 API 경로를 보호할 수도 있습니다.

   // pages/api/protected-route.js
   import { getSession } from 'next-auth/react';
   import { ROLES } from '../../lib/roles';

   export default async function handler(req, res) {
     const session = await getSession({ req });

     if (!session || !ROLES.ADMIN.includes(session.user.role)) {
       return res.status(403).json({ message: 'Forbidden' });
     }

     res.status(200).json({ message: 'Success' });
   }

로그인 후 복사

6. 테스트 및 개선

RBAC 구현을 철저하게 테스트하여 권한과 역할이 올바르게 적용되는지 확인하세요. 다양한 역할을 테스트하여 액세스 제한이 예상대로 작동하는지 확인하세요.

결론

역할 기반 액세스 제어(RBAC)를 Next.js 애플리케이션에 통합하려면 인증 설정, 역할 및 권한 정의, 애플리케이션 전체에 이러한 역할 적용이 포함됩니다. 이 가이드에 설명된 단계를 따르면 사용자 액세스를 효과적으로 관리하고 Next.js 애플리케이션이 안전하고 사용자 친화적인지 확인할 수 있습니다.
4G SIM 카트 카메라

위 내용은 Next.js에 RBAC 인증을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!