Context dan RBAC 4 lapis

Menyebarkan daftar izin ke seluruh komponen UI

Setelah pengguna masuk ke dashboard, puluhan komponen di layar perlu tahu apa saja yang boleh dilakukan pengguna tersebut: apakah menu Role boleh tampil di sidebar? Apakah tombol Tambah User boleh muncul? Apakah tombol Hapus Item harus disembunyikan? Mengoper daftar izin lewat props dari layout sampai ke baris tabel terdalam tentu sangat merepotkan.

Dua Context dengan tugas yang fokus

Aplikasi ini hanya menggunakan dua React Context di area dashboard: SidebarContext untuk menyimpan status ciut/buka navigasi, dan PermissionContext yang membungkus peta izin hasil pembacaan server menjadi satu fungsi sederhana bernama can(feature, action):

const { can } = usePermission();

// Di dalam komponen tabel:
{can("user", "add") && (
  <button onClick={openCreateModal}>Tambah User</button>
)}

Menyembunyikan tombol di browser hanyalah sopan santun antarmuka; keamanan sejati tidak pernah tinggal di dalam kode klien.

Empat lapisan pertahanan yang bekerja bersamaan

Agar izin benar-benar kedap dari manipulasi browser, pengecekan dilakukan di empat titik berbeda:

• Lapis 1 — Edge Proxy (proxy.ts): Menolak pengunjung tanpa cookie sesi JWT yang sah sebelum masuk ke rute /dashboard.
• Lapis 2 — Penjaga Halaman Server (requirePageAccess): Memeriksa izin baca (read) di server sebelum halaman dirender; bila tidak berhak, langsung dialihkan ke /forbidden.
• Lapis 3 — Penjaga Mutasi & API (requirePermission): Memeriksa izin spesifik (read, add, edit, delete) di setiap Server Action dan Route Handler.
• Lapis 4 — PermissionContext (usePermission): Menyembunyikan menu sidebar dan tombol aksi di layar supaya pengguna hanya melihat fitur yang memang bisa mereka gunakan.

Ringkasnya

React Context membuat antarmuka otomatis menyesuaikan diri dengan hak akses pengguna, sementara tiga lapisan server di belakangnya memastikan aturan bisnis tidak bisa ditembus.