So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen an der rollenbasierten Zugriffskontrolle (RBAC) festhalten. Es entscheidet nie direkt den Zugriff; Stattdessen beruht es auf der Berechtigungsantwort des Backend.

Frontend -Integration: Autorisierung in Next.js

Zu den Verantwortlichkeiten des Frontend gehören:

• Abrufen von Benutzerberechtigungen aus dem Backend.
• Gewährleistung der API -Aufrufe respektieren RBAC.
• Das Verstecken von UI -Elementen, die für den aktuellen Benutzer nicht zugänglich sind (z. B. "Zuordnung erstellen" für Schüler).

Implementierungsschritte:

1. Setup: Die Anleitung geht davon aus, dass Node.js installiert ist. Eine Next.js -App wird erstellt mit:

    NPX CREATE-NEXT-APP@LETCHER Frontend
   CD Frontend 

   

2. SHADCN UI-Integration: Tailwind CSS ist vorinstalliert. Shadcn UI wird für ein konsequentes Styling hinzugefügt:

    npx Shadcn@neuest Init
   NPX Shadcn@LETAGS -Taste -Karten -Dialog -Eingabetabelle Tabelle Wählen Sie Registerkarten

3. Paketinstallation: Es werden wichtige Pakete installiert:

    NPM I Lucide-React Zustand
   npm i-Save-dev axios

   Global CSS wird zur UI -Konsistenz hinzugefügt (siehe Originalartikel für den CSS -Code).

4. Komponentenerstellung: Es werden mehrere Komponenten erstellt (AddssignmentDialog, AddStudentDialog, Aufträge, AuthLayout, Funktionen, Fußzeile, Held, MobileMenu, Navbar, NotAuthorizedDialog, StudentStable - siehe Originalartikel für Einzelheiten). Diese Komponenten verwalten Benutzerinteraktionen, Datenanzeigen und Formulareinreichungen.

5. Staatsmanagement und Typen: Zustand wird für das staatliche Management verwendet. Geschäfte werden für die Authentifizierung ( useAuthStore ) und Benutzerprofile ( useProfileStore ) erstellt. Typscript -Schnittstellen ( Assignment , AssignmentsTable , Student , StudentsTable ) definieren Datenstrukturen. (Siehe Originalartikel für Code).

6. Routing: Die Datei app/page.tsx legt das Hauptlayout ein. Zusätzliche Seiten werden für die Anmeldung ( app/signup/page.tsx ), Rollenauswahl ( app/role-selection/page.tsx ), Login ( app/login/page.tsx ) und das Dashboard ( app/dashboard/page.tsx ) erstellt. Jede Seite verwendet die entsprechenden Komponenten und interagiert mit den Backend -APIs und den Zustand -Läden. (Siehe Originalartikel für Code).

7. Test: Nach dem Ausführen von npm run dev ist die Anwendung unter http://localhost:3000/ zugänglich. Bei Tests werden eine Schule erstellt, sich als unterschiedliche Rollen anmelden/anmelden und die Zugriffskontrolle überprüfen.

   

Wichtigste Imbiss:

• Die Erlaubnis vereinfacht die RBAC -Implementierung und die dynamische Verwaltung von Berechtigungen.
• Mieterbewusste Richtlinien halten die Datenisolation zwischen den Schulen bei.
• Die zentrale Zugangskontrolle verringert die Komplexität.
• Frontend zeigt nur autorisierte UI -Elemente an.
• Appwrite und erlauben die Beschleunigung der Entwicklung durch die Bearbeitung von Authentifizierung und Genehmigung.

Abschluss:

Diese Integration zeigt, wie die Genehmigung der Autorisierung in einer mit Next.js und Appwrite erstellten Multi-Mieter-EDTech-SaaS-Anwendung gestaltet wird. Die Trennung von Bedenken zwischen Frontend und Backend mit Erlaubnis, die die Autorisierungslogik zu verwalten, führt zu einer wartbaren und sichereren Anwendung. (Backend- und Frontend -Github -Repositories sind im Originalartikel verknüpft.)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!