Реалізація Role-Based Access Control (RBAC) у додатках на Next.js та PostgreSQL може бути реалізована різними способами, включаючи використання готових бібліотек або власне рішення. Однак, на даний момент немає специфічних готових рішень для RBAC, які були б інтегровані саме під Next.js та PostgreSQL, подібно до того, як це робиться для деяких інших фреймворків та баз даних.
Однак ми можемо використовувати поєднання інструментів, таких як NextAuth.js для аутентифікації та Prisma або TypeORM для управління базою даних, щоб створити кастомну реалізацію RBAC.
Даввайте розглянемо приклад, як можна побудувати власну систему RBAC з використанням Next.js, PostgreSQL та Prisma.
1. Встановлення необхідних пакетів
Для початку потрібно встановити необхідні пакети:
|
1 |
npm install next-auth @prisma/client prisma |
2. Налаштування Prisma
Налаштуйте Prisma для роботи з PostgreSQL, визначивши модель користувачів, ролей і дозволів у файлі schema.prisma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// schema.prisma model User { id Int @id @default(autoincrement()) email String @unique name String? password String role Role @relation(fields: [roleId], references: [id]) roleId Int } model Role { id Int @id @default(autoincrement()) name String @unique users User[] permissions Permission[] } model Permission { id Int @id @default(autoincrement()) action String resource String roles Role[] @relation(fields: [roleId], references: [id]) roleId Int } |
3. Ініціалізація бази даних та міграція
Ініціалізуйте Prisma та створіть міграції:
|
1 |
npx prisma migrate dev --name init |
4. Налаштування NextAuth.js
Налаштуйте NextAuth.js для використання Prisma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// pages/api/auth/[...nextauth].js import NextAuth from 'next-auth'; import Providers from 'next-auth/providers'; import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); export default NextAuth({ providers: [ Providers.Credentials({ async authorize(credentials) { const user = await prisma.user.findUnique({ where: { email: credentials.email }, }); if (user && user.password === credentials.password) { return user; } return null; }, }), ], callbacks: { async session(session, user) { session.user.id = user.id; session.user.role = user.role.name; return session; }, }, }); |
5. Реалізація захисту маршрутів
Для захисту маршрутів ви можете створити кастомний хук useAuth для перевірки ролі користувача:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// hooks/useAuth.js import { useSession, signIn } from 'next-auth/react'; export const useAuth = (allowedRoles) => { const { data: session } = useSession(); if (!session) { return { status: 'loading' }; } if (!allowedRoles.includes(session.user.role)) { return { status: 'forbidden' }; } return { status: 'authorized', session }; }; |
6. Приклад використання на захищеній сторінці
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// pages/admin.js import { useAuth } from '../hooks/useAuth'; export default function AdminPage() { const { status, session } = useAuth(['admin']); if (status === 'loading') { return <p>Loading...</p>; } if (status === 'forbidden') { return <p>You do not have access to this page.</p>; } return <div>Welcome, {session.user.name}. This is the admin page.</div>; } |
Висновок
Цей підхід дозволяє реалізувати систему RBAC з Next.js та PostgreSQL за допомогою Prisma та NextAuth.js. Хоча немає готових рішень для цієї специфікації, використання цих інструментів дозволяє створити кастомне рішення з потрібною гнучкістю та функціональністю. Ви можете розширити це рішення, додаючи різні ролі та дозволи відповідно до потреб вашого проекту.