ホームページ >ウェブフロントエンド >jsチュートリアル >Next.js で RBAC 認証を追加する方法
ロールベースのアクセス制御 (RBAC) は、最新の Web アプリケーションの重要な機能であり、管理者がシステム内のロールに基づいてユーザーのアクセス許可を管理できるようにします。 Next.js アプリケーションでの RBAC の実装には、ロールと権限の定義、これらの認証との統合、アプリケーションでのアクセス制御の強制など、いくつかの重要な手順が含まれます。このガイドでは、Next.js アプリケーションに RBAC 認証を追加するプロセスについて説明します。
ロールベースのアクセス制御 (RBAC) は、ロールに基づいて承認されたユーザーへのシステム アクセスを制限する方法です。ロールは一連の権限を定義し、ユーザーには関連する権限を付与するロールが割り当てられます。たとえば、アプリケーションには、管理者、編集者、閲覧者などの役割があり、それぞれに異なるレベルのアクセス権が与えられているとします。
まだ作成していない場合は、まず Next.js プロジェクトを作成します。
npx create-next-app@latest my-rbac-app cd my-rbac-app
RBAC を実装する前に、ユーザーを識別するための認証メカニズムが必要です。 Next.js には認証が組み込まれていないため、NextAuth.js や Firebase Authentication などのライブラリを使用できます。 NextAuth.js のセットアップの概要を次に示します:
npm install next-auth
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> ); }
アプリケーションでロールと権限を定義します。これは、中央の構成ファイルで行うことも、コード内で直接行うこともできます。ロールと権限を定義する簡単な例を次に示します。
// 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'], };
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 ルートを保護することもできます:
// 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' }); }
RBAC 実装を徹底的にテストして、権限とロールが正しく適用されていることを確認してください。さまざまなロールをテストして、アクセス制限が期待どおりに機能することを確認します。
ロールベースのアクセス制御 (RBAC) を Next.js アプリケーションに統合するには、認証の設定、ロールと権限の定義、およびこれらのロールのアプリケーション全体への適用が含まれます。このガイドで概説されている手順に従うことで、ユーザー アクセスを効果的に管理し、Next.js アプリケーションを安全かつユーザー フレンドリーなものにすることができます。
4G SIM カート カメラ
以上がNext.js で RBAC 認証を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。