Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi Kawalan Akses Berasaskan Peranan (RBAC). Ia tidak pernah memutuskan akses secara langsung; Sebaliknya, ia bergantung kepada tindak balas kebenaran backend.

Integrasi Frontend: Kebenaran di Next.js

Tanggungjawab frontend termasuk:

• Mendapatkan kebenaran pengguna dari backend.
• Memastikan panggilan API menghormati RBAC.
• Menyembunyikan elemen UI yang tidak dapat diakses oleh pengguna semasa (misalnya, "membuat tugasan" untuk pelajar).

Langkah Pelaksanaan:

1. Persediaan: Panduan menganggap node.js dipasang. Aplikasi Next.js dibuat menggunakan:

    NPX CREATE-NEXT-APP@frontend terkini
   CD Frontend 

   

2. Integrasi UI Shadcn: CSS Tailwind telah dipasang. Shadcn ui ditambah untuk gaya yang konsisten:

    npx shadcn@terbaru init
   NPX Shadcn@Terkini Tambah Button Card Dialog Input Label Jadual Pilih Tab

3. Pemasangan Pakej: Pakej penting dipasang:

    npm i lucide-react zustand
   NPM I-SAVE-DEV AXIOS

   CSS global ditambah untuk konsistensi UI (lihat artikel asal untuk kod CSS).

4. Penciptaan Komponen: Beberapa komponen dicipta (AddAssignmentDialog, AddStudentDialog, TugasanStable, AuthLayout, Ciri -ciri, Footer, Hero, Mobilemenu, Navbar, NotauthorizedDialog, StudentStable - lihat artikel asal untuk maklumat lanjut). Komponen ini mengendalikan interaksi pengguna, paparan data, dan penyerahan bentuk.

5. Pengurusan dan Jenis Negeri: Zustand digunakan untuk pengurusan negeri. Kedai dicipta untuk pengesahan ( useAuthStore ) dan profil pengguna ( useProfileStore ). Antara muka TypeScript ( Assignment , AssignmentsTable , Student , StudentsTable ) menentukan struktur data. (Lihat artikel asal untuk kod).

6. Routing: Fail app/page.tsx menetapkan susun atur utama. Halaman tambahan dibuat untuk pendaftaran ( app/signup/page.tsx ), pemilihan peranan ( app/role-selection/page.tsx ), login ( app/login/page.tsx ), dan papan pemuka ( app/dashboard/page.tsx ). Setiap halaman menggunakan komponen yang sesuai dan berinteraksi dengan API dan kedai Zustand backend. (Lihat artikel asal untuk kod).

7. Ujian: Selepas menjalankan npm run dev , aplikasi itu boleh diakses di http://localhost:3000/ . Ujian melibatkan mewujudkan sekolah, mendaftar/log masuk sebagai peranan yang berbeza, dan mengesahkan kawalan akses.

   

Takeaways Kunci:

• Permit memudahkan pelaksanaan RBAC, mengurus keizinan secara dinamik.
• Dasar penyewa yang menyedari mengekalkan pengasingan data antara sekolah.
• Kawalan akses berpusat mengurangkan kerumitan.
• Frontend hanya memaparkan elemen UI yang diberi kuasa.
• Appwrite dan permit mempercepatkan pembangunan dengan mengendalikan pengesahan dan kebenaran.

Kesimpulan:

Integrasi ini menunjukkan bagaimana permit menyelaraskan kebenaran dalam aplikasi edtech SaaS multi-penyewa yang dibina dengan Next.js dan AppWrite. Pemisahan kebimbangan antara frontend dan backend, dengan permit menguruskan logik kebenaran, menghasilkan aplikasi yang lebih banyak dan selamat. (Repositori Backend dan Frontend GitHub dikaitkan dalam artikel asal).

Atas ialah kandungan terperinci Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!