如何在 Next.js 中新增 RBAC 授權

發佈於2024-11-04

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: '[email protected]', 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 (
       
         Sign In
         
       
     );
   }

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 Loading...;
       if (!session || !allowedRoles.includes(session.user.role)) {
         signIn();
         return null;
       }

       return ;
     };
   }

在您的頁面中使用此 HOC：

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

   function AdminPage() {
     return Welcome, Admin!;
   }

   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' });
   }