Authentifizierungsabläufe und geschützte Routen
Erstellen Sie einen einfachen Authentifizierungsablauf: Login-Status, geschützte Routen, Erfassen des ursprünglich gewünschten Pfads und grundlegende Rollenprüfungen.
Authentifizierungsabläufe und geschützte Routen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum geschützte Routen
Ziel: Schützen Sie Seiten, die einen angemeldeten Benutzer benötigen.
- Verfolgen Sie den Authentifizierungsstatus
- Schützen Sie Routen
- Merken Sie sich den ursprünglich gewünschten Pfad
Grundlegende Konzepte
- Auth store: user oder null
- Guard: Wenn kein user vorhanden ist → zu login wechseln
- Post-login: Zum gespeicherten Ziel navigieren
Einrichtung des Auth-Stores
Erstellen Sie einen kleinen Auth-Kontext mit login/logout und einem einfachen Router-Status.
<div id="root"></div>Guard und Ziel merken
Eine ProtectedRoute prüft die Authentifizierung. Falls sie fehlt, zeigt sie eine Login-Ansicht an und speichert die Zielroute.
<div id="root"></div>Rollenbasierter Guard
Fügen Sie eine Rollenprüfung hinzu: Zeigen Sie eine 403-Nachricht an, wenn dem Benutzer die Berechtigung fehlt.
<div id="root"></div>Tipps und Stolperfallen
- Rendern Sie geschützte Inhalte niemals, bevor der Authentifizierungsstatus bekannt ist
- Speichern Sie die gewünschte Route und navigieren Sie nach dem Login dorthin
- Zeigen Sie klare 401/403-Nachrichten an
Prüfung zum Verhalten geschützter Routen
Zusammenfassung
Zusammenfassung: Verwenden Sie einen Auth-Store, schützen Sie geschützte Routen, speichern Sie den gewünschten Pfad und ergänzen Sie einfache Rollenprüfungen für Bereiche, die nur Administratoren offenstehen.
Häufig gestellte Fragen
Ist die Lektion „Authentifizierungsabläufe und geschützte Routen“ kostenlos?
Ja — der vollständige Text von „Authentifizierungsabläufe und geschützte Routen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Authentifizierungsabläufe und geschützte Routen“?
Erstellen Sie einen einfachen Authentifizierungsablauf: Login-Status, geschützte Routen, Erfassen des ursprünglich gewünschten Pfads und grundlegende Rollenprüfungen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Authentifizierungsabläufe und geschützte Routen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Verschachtelte Layouts, Loader (Konzept) und Prefetching
- Authentifizierungsabläufe und geschützte Routen
- Scroll-Wiederherstellung und Nicht-gefunden-Routen