Aplikasi Web Fullstack Next.js 15 · Pelajaran

Kawalan Akses Berasaskan Peranan (RBAC)

Modelkan peranan dan keizinan pengguna, simpannya dalam sesi dan kuatkuasakan semakan peranan merentas komponen pelayan, pengendali laluan serta middleware dalam aplikasi Next.js 15.

Pelajaran 4 daripada 413 langkah

Kawalan Akses Berasaskan Peranan (RBAC) ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Kebenaran Melangkaui Log Masuk

Pengesahan menjawab siapakah anda; kebenaran menjawab apakah yang boleh anda lakukan. Kawalan Akses Berasaskan Peranan (RBAC) memberikan satu atau lebih peranan kepada setiap pengguna dan memberikan kebenaran kepada peranan, bukannya kepada individu.

Peranan: admin, editor, viewer
Kebenaran ditentukan berdasarkan peranan.

Menyimpan Peranan dalam JWT

Dengan NextAuth, lampirkan peranan pada token dalam panggilan balik jwt supaya peranan itu dihantar bersama setiap permintaan tanpa perlu mengakses pangkalan data.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role;
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role;
    return session;
  },
}

Peta Kebenaran

Pusatkan perkara yang boleh dilakukan oleh setiap peranan. Peta ringkas menjadikan semakan konsisten dan mudah diaudit.

export const permissions = {
  admin: ['read', 'write', 'delete'],
  editor: ['read', 'write'],
  viewer: ['read'],
};

export function can(role, action) {
  return permissions[role]?.includes(action) ?? false;
}

Menguji Pembantu

Pembantu can ialah logik tulen, jadi ia boleh dijalankan di mana-mana sahaja. Berikut ialah semakan kendiri.

const permissions = {
  admin: ['read', 'write', 'delete'],
  editor: ['read', 'write'],
  viewer: ['read'],
};
function can(role, action) {
  return permissions[role]?.includes(action) ?? false;
}
console.log(can('editor', 'write'));
console.log(can('viewer', 'delete'));

Melindungi Komponen Pelayan

Baca sesi pada pelayan dan halakan semula pengguna yang tidak mempunyai peranan yang diperlukan sebelum sebarang UI sensitif dipaparkan.

import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function AdminPage() {
  const session = await auth();
  if (session?.user.role !== 'admin') redirect('/');
  return <h1>Admin Dashboard</h1>;
}

Melindungi Pengendali Laluan

Pengendali laluan API juga mesti menguatkuasakan peranan. Jangan sesekali mempercayai klien. Kembalikan 403 apabila peranan tidak mencukupi.

import { auth } from '@/auth';
import { can } from '@/lib/rbac';

export async function DELETE(req) {
  const session = await auth();
  if (!can(session?.user.role, 'delete')) {
    return new Response('Forbidden', { status: 403 });
  }
  return Response.json({ ok: true });
}

Semakan Peranan dalam Middleware

Middleware boleh menyekat seluruh kumpulan laluan pada peringkat awal. Padankan awalan pentadbir dan sahkan peranan token.

import { NextResponse } from 'next/server';

export function middleware(req) {
  const role = req.cookies.get('role')?.value;
  if (req.nextUrl.pathname.startsWith('/admin') && role !== 'admin') {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}

export const config = { matcher: ['/admin/:path*'] };

Pertahanan Berlapis

Laksanakan semakan pada berbilang lapisan. Middleware menyediakan pintu kawalan pertama yang pantas, tetapi sentiasa sahkan semula dalam komponen pelayan atau pengendali yang benar-benar mengakses data.

Middleware: pintu kawalan penghalaan umum.
Komponen pelayan / pengendali: semakan berautoriti.

Menyembunyikan UI Secara Bersyarat

Sembunyikan kawalan yang tidak boleh digunakan oleh pengguna, tetapi ingat bahawa penyembunyian UI ialah kemudahan, bukannya keselamatan. Pelayan tetap mesti menolak tindakan yang tidak dibenarkan.

export default async function Toolbar() {
  const session = await auth();
  return (
    <div>
      {can(session?.user.role, 'delete') && <DeleteButton />}
    </div>
  );
}

Berbilang Peranan dan Skop

Aplikasi sebenar sering memberikan beberapa peranan atau skop terperinci kepada seseorang pengguna. Simpan tatasusunan dan semak keahliannya. Pendekatan ini boleh berkembang kepada sistem berasaskan kebenaran (ABAC) kemudian.

function hasRole(userRoles, required) {
  return userRoles.some((r) => r === required);
}
console.log(hasRole(['editor', 'viewer'], 'editor'));

Kesilapan Lazim

Elakkan kesilapan RBAC berikut:

Mempercayai peranan yang dihantar daripada isi kandungan klien.
Menyemak peranan hanya dalam UI.
Terupa mengeluarkan semula JWT selepas perubahan peranan.
Mengekod rentetan peranan secara terus dan bukannya menggunakan peta berpusat.

Semakan Pantas

Di manakah tempat berautoriti untuk menguatkuasakan bahawa hanya pentadbir boleh memadam rekod?

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah melaksanakan RBAC dari hujung ke hujung:

Menyimpan peranan dalam JWT dan sesi melalui panggilan balik NextAuth.
Memusatkan kebenaran dengan pembantu can().
Melindungi komponen pelayan, pengendali laluan dan middleware.
Menggunakan pertahanan berlapis serta mengelakkan perangkap mempercayai klien.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kawalan Akses Berasaskan Peranan (RBAC)” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Kawalan Akses Berasaskan Peranan (RBAC)”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Kawalan Akses Berasaskan Peranan (RBAC)”?

Modelkan peranan dan keizinan pengguna, simpannya dalam sesi dan kuatkuasakan semakan peranan merentas komponen pelayan, pengendali laluan serta middleware dalam aplikasi Next.js 15. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Kawalan Akses Berasaskan Peranan (RBAC)” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Aplikasi Web Fullstack Next.js 15