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