Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations utilisateur pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent au contrôle d'accès basé sur les rôles (RBAC). Il ne décide jamais directement de l'accès; Au lieu de cela, il repose sur la réponse d'autorisation du backend.

Intégration frontale: autorisation dans Next.js

Les responsabilités du frontend comprennent:

• Récupération des autorisations utilisateur du backend.
• Assurer que les appels API respectent la RBAC.
• Cacher des éléments d'interface utilisateur inaccessibles à l'utilisateur actuel (par exemple, "créer un devoir" pour les étudiants).

Étapes de mise en œuvre:

1. Configuration: le guide suppose que Node.js est installé. Une application Next.js est créée en utilisant:

    NPX Create-next-App @ Dernited Frontend
   frontend CD 

   

2. INTÉGRATION DE L'UI SHADCN: Le vent arrière CSS est préinstallé. L'interface utilisateur Shadcn est ajoutée pour un style cohérent:

    npx shadcn @ dernier init
   NPX shadcn @ Dernier Ajouter la boîte de dialogue de la carte de dialogue de carte de bouton

3. Installation de packages: les packages essentiels sont installés:

    npm i lucide-react zustand
   NPM I --Save-Dev axios

   Global CSS est ajouté pour la cohérence de l'interface utilisateur (voir l'article d'origine pour le code CSS).

4. Création de composants: plusieurs composants sont créés (addAssignmentDialog, AddStudentDialog, affectationStable, Authlayout, Fonctionnalités, Footer, Hero, MobileMenu, Navbar, NotAuthorizedDialog, StudentStable - Voir l'article original pour plus de détails). Ces composants gèrent les interactions utilisateur, l'affichage de données et les soumissions de formulaires.

5. Gestion et types d'État: Zustand est utilisé pour la gestion de l'État. Les magasins sont créés pour l'authentification ( useAuthStore ) et les profils utilisateur ( useProfileStore ). Les interfaces dactylographiques ( Assignment , AssignmentsTable , Student , StudentsTable ) définissent les structures de données. (Voir l'article d'origine pour le code).

6. Routage: le fichier app/page.tsx configure la disposition principale. Des pages supplémentaires sont créées pour l'inscription ( app/signup/page.tsx ), la sélection des rôles ( app/role-selection/page.tsx ), Login ( app/login/page.tsx ) et le tableau de bord ( app/dashboard/page.tsx ). Chaque page utilise les composants appropriés et interagit avec les magasins API et Zustand backend. (Voir l'article d'origine pour le code).

7. Test: Après avoir exécuté npm run dev , l'application est accessible sur http://localhost:3000/ . Les tests consistent à créer une école, à s'inscrire / à se connecter en tant que rôles différents et à vérifier le contrôle d'accès.

   

Les principaux plats à retenir:

• Le permis simplifie la mise en œuvre du RBAC, gérant dynamiquement les autorisations.
• Les politiques sensibles aux locataires maintiennent l'isolement des données entre les écoles.
• Le contrôle d'accès centralisé réduit la complexité.
• Frontend n'affiche que les éléments d'interface utilisateur autorisés.
• AppWrite et permettent accélérer le développement en gérant l'authentification et l'autorisation.

Conclusion:

Cette intégration démontre comment le permis rationalise l'autorisation dans une application Multi-locataire EDTech SaaS construite avec Next.js et appwrite. La séparation des préoccupations entre le frontend et le backend, avec un permis gérant la logique d'autorisation, se traduit par une application plus maintenable et sécurisée. (Les référentiels de backend et frontend github sont liés dans l'article original).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!