Wie können wir diesen Authentifizierungsbildschirm jetzt verlassen, wenn wir angemeldet sind oder wenn wir uns erfolgreich angemeldet haben?
Das ist nicht allzu schwierig.
Wenn wir es hier über diese Versendung hinaus schaffen, ohne im Fangblock zu landen,
also immer noch hier
im Versuchsblock, können wir einfach Requisiten anrufen. Navigation. Navigieren Sie wie immer und
navigieren Sie zu dem anderen Bildschirm, den wir
in unserem Switch-Navigator eingerichtet haben, also in diesem Fall zum Shop-Bildschirm. Also lass uns das machen, lass uns einfach einkaufen gehen und
erstmal dort, sobald wir uns erfolgreich angemeldet haben, was ich jetzt mache, dies wird geladen und
wir sind hier. Jetzt erhalte ich
hier eine Warnung bezüglich einer Statusaktualisierung, die nicht durchgeführt werden konnte. Das heißt, dieser
Satz lädt den Status, der jetzt fehlschlägt, wenn wir weg navigieren. Die Lösung ist einfach, dass wir nicht versuchen sollten, den Status auf diesem
Bildschirm zu aktualisieren, wenn wir nicht mehr auf dem Bildschirm sind. Wir können ihn also einfach in den catch-Block verschieben, da wir
das Laden nur zurücksetzen müssen, wenn ein Fehler auftritt weil dies der einzige Fall ist, wenn wir auf
dem Authentifizierungsbildschirm bleiben, andernfalls müssen wir den
Ladezustand nicht ändern, da wir den Bildschirm sowieso verlassen. Damit werden wir auch das
los, wenn ich
es jetzt noch einmal versuche, los geht's und
jetzt
sind wir in unserem Hauptgeschäft. Jetzt verwenden wir das Token natürlich immer
noch nicht, also stellen
wir sicher, dass wir das auch tun, und gehen wir dazu zum Auth-Reduzierer und fügen dort einen Anfangszustand hinzu, der
im Grunde beschreibt, mit welchem Zustand wir beginnen möchten und was unser
General ist Zustandsform ist und dort möchte ich das Token speichern, das anfänglich null ist, und ich
möchte die Benutzer-ID speichern, die anfänglich null ist, also sehr grundlegender Anfangszustand.
Dann können wir die Reduzierungsfunktion exportieren, die diesen Anfangszustand annimmt und die natürlich
auch eine Aktion empfängt. Hier möchte ich wie immer den Aktionstyp einschalten und habe
zwei Fälle, die mich gerade interessieren.
Eine ist die Anmeldeaktion, daher müssen Sie diesen Bezeichner aus dem Aktionsordner und der dortigen Authentifizierungsdatei importieren, und
der andere Fall ist die Anmeldeaktion. Sie müssen also
auch diesen Bezeichner importieren,
in anderen Fällen möchte ich nur gib meinen Staat zurück. Wenn wir uns also anmelden, möchte ich einen neuen Status zurückgeben, in
dem das Token "Aktion" sein soll. Token und Benutzer-ID sollten Aktion sein. userId und das ist das gleiche Update,
das ich bei der Anmeldung benötige, damit wir es einfach dort kopieren können.
Jetzt müssen wir natürlich sicherstellen, dass unsere Aktion Token und Benutzer-ID enthält.
Wenn wir also am Ende der Anmeldung hier beim Erstellen der Anmeldeaktion im Aktionsersteller ein Token-Feld
hinzufügen und eine Benutzer-ID hinzufügen Feld.
Jetzt kann das Token aus den Antwortdaten abgerufen werden. Dort befindet sich das ID-Token und hier das gleiche. ResData ist kein ID-Token, sondern die
lokale ID. Hier im Protokoll sehen Sie die lokale ID. Dies ist die Benutzer-ID. Wenn Sie
nach oben scrollen , ID-Token, das ist das Token. Das ist es, was ich hier versende, und
wir können das einfach kopieren und dasselbe verwenden, fast dasselbe für
die Anmeldung. Das einzige, was geändert werden muss, ist diese Kennung. Sie können sogar die Anmeldung vereinen und
sich bei einer kombinierten Authentifizierungskennung anmelden, sagen wir denn in einem Reduzierer machen wir sowieso das Gleiche.
Ich habe es hier nur aufgeteilt, um klar zu sein, dass wir am Ende zwei verschiedene Dinge haben,
aber das Update ist das gleiche, sodass wir diese beiden Aktionstypen definitiv kombinieren können.
Damit speichern wir jetzt den Token und das ist schön,
aber wofür brauchen wir diesen Token wieder?
Wir benötigen das Token, das wir jetzt speichern, um auf unsere API zugreifen zu können. Gehen wir dazu zu Firebase
und zur Datenbank.
Denken Sie daran, dass wir beim Einrichten dieser Datenbank erwähnt haben, dass Sie in diesem
Testmodus starten sollten, wenn Sie sich erinnern. Dies hat dazu geführt, dass bestimmte Regeln eingerichtet wurden und Sie diese
überprüfen können, wenn Sie auf die Registerkarte Regeln klicken. Dies steuert, wer in Ihre Datenbank lesen und
schreiben kann, und im Moment ist dies beide auf true gesetzt, was bedeutet, dass jeder alles lesen und
jeder alles schreiben kann.
Das ist natürlich normalerweise nicht das, was Sie wollen, stattdessen setze ich hier beide auf auth ungleich null, was seltsam aussehen könnte, und dies sollte
hier übrigens in doppelte Anführungszeichen stehen, aber dies ist die Firebase-Syntax, und Sie können hier mehr
über die Regeln erfahren Klicken Sie auf Weitere Informationen oder googeln Sie einfach
nach den Sicherheitsregeln für Firebase-Echtzeitdatenbanken.
Dies sagt Firebase, dass nur authentifizierte Benutzer lesen und schreiben können, sodass nur Benutzer, die
die Anforderung mit einem gültigen Token senden, lesen und schreiben können.
Jetzt könnten Sie sogar argumentieren, dass Redux immer erlaubt
sein sollte, wir könnten dies auf true setzen und Sie könnten sogar spezifischer in Bezug auf die Regeln sein, so dass Sie sagen,
Redux von Produkten
ist erlaubt, Redux von Bestellungen ist
nicht, aber auch dies können Sie überprüfen mit den offiziellen Dokumenten.
Ich werde mit dem Setup fortfahren, bei dem Redux immer erlaubt ist, das Schreiben jedoch nicht.
Zum Schreiben brauchen wir jetzt
einen Token, sonst haben wir ein Problem. Wenn wir uns hier anmelden und das Token speichern, es
aber derzeit nicht an
Anforderungen anhängen, können wir alle Daten laden.
Das ist in Ordnung, aber Sie werden auch feststellen, dass ich versuche, dies zu bearbeiten und
ein paar zu entfernen von Ausrufezeichen hier, am Ende bekomme ich einen Fehler und dieser Fehler wird ausgelöst, weil ich nicht
schreiben darf und Firebase daher den Zugriff blockiert und eine Fehlerantwort zurückgibt.
Jetzt müssen wir das in einem Reduzierer gespeicherte Token nutzen und es tatsächlich an unsere
ausgehenden Anforderungen anhängen.
Dazu müssen wir diesen Reduzierer zunächst in unserem
Root-Reduzierer, also in der App, registrieren. js Datei, wir müssen es importieren, wir müssen den Auth Reducer aus dem Store
importieren und dort den Reducer Ordner und dort die Auth Datei und sie zu kombinierten Reducern hinzufügen, vielleicht hier mit dem Auth Key, aber
natürlich können Sie verwenden jeder Schlüssel, den Sie wollen. Auf diese Weise können wir dies
nutzen und auf dieses Token zugreifen. Jetzt müssen wir es an die ausgehenden Anforderungen anhängen, z. B. für
Produkte, die wir an die Anforderung anhängen müssen, die
wir zum Aktualisieren von Produkten senden. Dies wäre also diese Anforderung hier. Die Art und Weise, wie Sie eine Anfrage in Firebase
anhängen, finden Sie in den offiziellen Firebase-Dokumenten für die Echtzeitauthentifizierung von Datenbankbenutzern. Am Ende haben
Sie gelernt, dass Sie ein Token an Ihre ausgehende Anfrage anhängen können, indem Sie einfach diese Authentifizierungsabfrage hinzufügen
Parameter am Ende Ihrer Anforderungs-URL.
Hier müssen wir also am Ende ein Fragezeichen hinzufügen, das gleich
ist, und hier müssen wir unser Token haben. Wie können wir nun hier auf das Token zugreifen?
Wir sind im Action Creator, was bedeutet, dass wir hier keinen einfachen Zugang zum
Store haben, zum Redux Store oder nicht? Redux Thunk, dieses nette Paket, mit dem wir diese Syntax mit
der Funktion schreiben können, die die Versandfunktion empfängt, die uns tatsächlich etwas Süßes gibt.
Wir können diese Funktion auch ein wenig ändern und nicht nur den Versand erhalten, sondern auch ein zweites
Argument. Dies ist eine weitere Funktion, die uns den Zugriff auf den Redux-Status
ermöglicht, sodass wir Zugriff auf den aktuellen Status unseres Redux-Speichers erhalten. Wenn ich also das Ergebnis von get state hier auf der Konsole protokolliere,
wollen wir sehen, was uns das
bringt, und um Fehler zu vermeiden, füge ich hier im Moment einfach eine leere Zeichenfolge hinzu, damit wir diesen Code testen können.
Natürlich wird dies nicht funktionieren, aber wir werden es bald beheben. Lassen Sie uns also sehen, was sich in diesem Zustand befindet, wenn wir dies
ausführen.
Also
Zeit, sich ganz schnell wieder anzumelden und dann zum
Admin-Bildschirm zu gehen und zu versuchen, dies zu bearbeiten, was natürlich immer noch fehlschlägt,
aber das spielt keine Rolle, denn jetzt, wenn ich hier
klicke, schlägt es fehl, aber was Sie sehen werden, ist das hier Im Protokoll erhalten wir eine vollständige Ausgabe
unseres gesamten Redux-Stores. Dies ist
unser Redux-Shop. Wir erhalten ein Objekt mit unserem Auth-Status-Slice, das ein weiteres Objekt
mit unserem Token und der Benutzer-ID, unserem Karten-Status-Slice, unserem Bestell-Status-Slice und unserem Produkt-Status-Slice enthält.
Auf diese Weise kann ich auf meinen Redux-Speicher zugreifen und auf das Token zugreifen, sodass das Token
durch Ausführen von getState abgerufen werden kann. auth. Token, da dies uns Zugriff
auf unseren vollständigen Redux-Speicher ermöglicht, erhalten wir dann Zugriff auf das Auth-Slice und dies auf
die Token-Eigenschaft, die wir in diesem Auth-Slice verwalten. Und jetzt können wir
im Produktaktionsersteller dieses Token hier am Ende hinzufügen. Hier können wir diesen String also einfach durch die Token-Variable ersetzen, die
unser Token enthält. Wenn
wir dies jetzt speichern, mit dieser kleinen Änderung, wenn wir uns jetzt erneut anmelden
und später, ändern wir dies auch so,
dass wir es nicht ständig brauchen Relogin, keine Sorge. Wenn wir uns erneut anmelden, gehen wir zu admin, klicken hier auf Hinzufügen und
jetzt versuchen wir dies. Dies funktioniert erneut, da das Token jetzt angehängt wird. Firebase überprüft es und stellt fest, dass es gültig ist,
da wir uns natürlich nicht damit vermischt
haben , es ist ein gültiges Token und daher funktioniert dies einfach.
Jetzt brauchen wir das Token nicht nur, wenn wir unsere Produkte aktualisieren, sondern
auch, wenn wir ein neues Produkt hinzufügen. Also kopiere ich diese Logik und füge hier
dieselbe Logik hinzu. Wenn wir ein Produkt erstellen, erhalte ich mein Token mit Hilfe des zweiten Arguments,
das wir hier erhalten können,
wenn wir es brauchen, der Funktion get state und dies ermöglicht es mir Ändern Sie diese einfachen Anführungszeichen in Back-Ticks, damit
ich diesen Abfrageparameter hier am Ende mit einem Fragezeichen von gleich und gleich meinem Token bequem hinzufügen kann.
Jetzt können wir ein Produkt erstellen und ein Produkt aktualisieren. Das Löschen ist natürlich auch
eine Schreibanforderung. Zum Löschen von Produkten mache ich genau das Gleiche, erhalte hier Zugriff auf meinen Shop mit der Funktion
"Status abrufen" und füge dann auch ein Fragezeichen hinzu von hier am Ende und fügen Sie den Token hinzu.
Das ist also eine Sache.
In den Bestellungen ist es ähnlich. Zum Abrufen benötigen wir es nicht, aber zum Hinzufügen tun wir es, weil
das Hinzufügen eine Schreiboperation ist.
Dort erhalten wir den Status, wenn wir möchten, wir können das Token mit dem gleichen Ansatz wie zuvor von dort extrahieren
und wir können dies hier und da anhängen. Wir werden tatsächlich bald auch die Benutzer-ID benötigen, also werden wir uns darum kümmern Darüber in der
nächsten Vorlesung, aber stellen Sie vorerst
sicher, dass Sie den Token überall anhängen, und lassen
Sie uns nun sehen, wie wir auch sicherstellen können, dass Bestellungen tatsächlich unserem Benutzer gehören.