Next.js で RBAC 認証を追加する方法-jsチュートリアル-php.cn

Next.js で RBAC 認証を追加する方法

DDD

リリース： 2024-09-13 06:16:06

オリジナル

975 人が閲覧しました

How to Add RBAC Authorization in Next.js

ロールベースのアクセス制御 (RBAC) は、最新の Web アプリケーションの重要な機能であり、管理者がシステム内のロールに基づいてユーザーのアクセス許可を管理できるようにします。 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 Authentication などのライブラリを使用できます。 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 中国語 Web サイトの他の関連記事を参照してください。