Cara Menambah Keizinan RBAC dalam Next.js

Kawalan Akses Berasaskan Peranan (RBAC) ialah ciri penting dalam aplikasi web moden, membolehkan pentadbir mengurus kebenaran pengguna berdasarkan peranan mereka dalam sistem. Melaksanakan RBAC dalam aplikasi Next.js melibatkan beberapa langkah utama: mentakrifkan peranan dan kebenaran, menyepadukan ini dengan pengesahan dan menguatkuasakan kawalan akses dalam aplikasi anda. Panduan ini akan memandu anda melalui proses menambah kebenaran RBAC pada aplikasi Next.js.

1. Memahami RBAC

Kawalan Akses Berasaskan Peranan (RBAC) ialah kaedah untuk menyekat akses sistem kepada pengguna yang dibenarkan berdasarkan peranan mereka. Peranan mentakrifkan satu set kebenaran dan pengguna diberikan peranan yang memberikan mereka kebenaran yang berkaitan. Contohnya, dalam aplikasi, anda mungkin mempunyai peranan seperti pentadbir, editor dan penonton, masing-masing mempunyai tahap akses yang berbeza.

2. Menyediakan Projek Next.js Anda

Jika anda belum melakukannya, mulakan dengan mencipta projek Next.js:

npx create-next-app@latest my-rbac-app
cd my-rbac-app

3. Menambah Pengesahan

Sebelum melaksanakan RBAC, anda memerlukan mekanisme pengesahan untuk mengenal pasti pengguna. Next.js tidak disertakan dengan pengesahan terbina dalam, jadi anda boleh menggunakan perpustakaan seperti NextAuth.js atau Firebase Authentication. Berikut ialah gambaran keseluruhan ringkas tentang penyediaan NextAuth.js:

1. Pasang NextAuth.js:

   npm install next-auth

1. Buat Laluan API untuk Pengesahan:

Dalam direktori halaman/api anda, buat fail bernama [...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;
       }
     }
   });

1. Tambah Halaman Log Masuk:

Buat halaman log masuk mudah di 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. Menentukan Peranan dan Kebenaran

Tentukan peranan dan kebenaran dalam aplikasi anda. Anda boleh melakukan ini dalam fail konfigurasi pusat atau terus dalam kod anda. Berikut ialah contoh mudah untuk menentukan peranan dan kebenaran:

// 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. Melaksanakan RBAC

Sepadukan logik RBAC ke dalam halaman Next.js dan laluan API anda. Begini cara untuk menyekat akses berdasarkan peranan:

1. Melindungi Halaman:

Buat Komponen Pesanan Tinggi (HOC) untuk membungkus halaman anda yang dilindungi:

   // 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} />;
     };
   }

Gunakan HOC ini dalam halaman anda:

   // 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]);

1. Melindungi Laluan API:

Anda juga boleh melindungi laluan API dengan menyemak peranan pengguna:

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

6. Pengujian dan Penapisan

Pastikan anda menguji pelaksanaan RBAC anda dengan teliti untuk mengesahkan bahawa kebenaran dan peranan dikuatkuasakan dengan betul. Uji peranan yang berbeza untuk mengesahkan bahawa sekatan akses berfungsi seperti yang diharapkan.

Kesimpulan

Mengintegrasikan Kawalan Akses Berasaskan Peranan (RBAC) ke dalam aplikasi Next.js melibatkan penyediaan pengesahan, menentukan peranan dan kebenaran serta menguatkuasakan peranan ini sepanjang aplikasi anda. Dengan mengikut langkah yang digariskan dalam panduan ini, anda boleh mengurus akses pengguna dengan berkesan dan memastikan aplikasi Next.js anda selamat dan mesra pengguna.
KAMERA SIM CART 4G

Atas ialah kandungan terperinci Cara Menambah Keizinan RBAC dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!