如何在 Next.js 中新增 RBAC 授權-js教程-PHP中文網

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

DDD

發布： 2024-09-13 06:16:06

原創

976 人瀏覽過

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

登入後複製