Wir haben also
viel erreicht, wir können Daten schreiben, Daten
abrufen, unser Token verwenden, um Daten zu erfassen oder Produkte
und Bestellungen an unseren aktuell angemeldeten Benutzer zu senden, wir
können uns anmelden und so weiter
und das ist alles schön.
Eine Sache, die wir momentan nicht tun, ist, dass wir unsere Sitzungen
sozusagen nicht fortsetzen. Wenn ich neu lade, muss ich
mich immer wieder
anmelden und das ist nicht wirklich das, was ich will. Es wäre schön, wenn wir uns automatisch anmelden könnten, wenn
wir ein gültiges Token haben, und dafür müssen wir zwei Dinge tun - wir müssen das Token speichern Irgendwo auf dem Gerät, nicht in
Redux, da sich Redux im Speicher befindet und dies bei jedem Neustart der App verloren geht.
Es muss sich also sozusagen irgendwo auf
der Festplatte des Geräts befinden. Außerdem müssen wir diesen Speicher bei jedem Start unserer App überprüfen und das Token in Redux
automatisch festlegen und den Benutzer umleiten, wenn wir dort ein gültiges Token finden.
Beginnen wir jetzt mit dem Speichern, da dies ein logischer erster Schritt ist. Zum Speichern müssen wir
hier etwas in den Action Action Creator
des Produkts importieren, aber hier im Auth Action Creator müssen Sie asynchronen Speicher aus React Native importieren.
Wenn dies
importiert ist, können wir damit Daten auf dem Gerät speichern. Der asynchrone Speicher ist eine native React-API, die letztendlich einen Schlüsselwertspeicher auf dem
Gerät verwendet, der sowohl unter iOS als auch unter Android verfügbar ist und in dem Daten
gespeichert werden können, die weiterhin bestehen über App-Neustarts hinweg, sodass wir Daten speichern können, die beim Start oder
Neustart der App nicht verloren gehen.
Also werde ich eine neue Funktion hinzufügen, Daten im Speicher speichern oder so etwas und dort
erwarte ich mein Token und meine Benutzer-ID, die beiden Daten, die mich hier interessieren, und wir können jetzt den asynchronen Speicher
bis dahin verwenden Legen Sie ein Element fest, mit dem Sie Daten speichern, und das Element, das Sie festlegen, muss eine Zeichenfolge sein. Zunächst müssen Sie
jedoch einen Schlüssel definieren. Ich werde ihn
als Benutzerdaten bezeichnen, aber das liegt bei Ihnen. Sie
benötigen diesen Schlüssel später Um Ihre Daten abzurufen und der zweite Wert ist
jetzt eine Zeichenfolge, also
die Zeichenfolge, die Sie dort speichern möchten, und Sie müssen im Wesentlichen eine Zeichenfolge speichern.
Das
ist kein Problem, wir können json verwenden. stringify, um ein Javascript-Objekt in eine Zeichenfolge zu konvertieren, und das Objekt,
das ich konvertieren möchte, ist ein Objekt, das mein Token enthält, das ich hier als Argument erhalte, und das die Benutzer-ID enthält,
die ich als Argument erhalte.
Am Ende speichern wir dieses Objekt als Zeichenfolge auf dem Gerät.
Jetzt müssen wir nur noch Save Data to Storage aufrufen, wenn wir uns angemeldet oder angemeldet haben. Hier können wir also möglicherweise nach
dem Versand der Anmeldung Save Data to Storage aufrufen und resData weiterleiten. idToken
und resData. localId, also die gleichen Dinge, die wir in Redux verwenden
und die wir definitiv dort verwenden möchten, da Redux für die laufende
Anwendung wichtig ist, aber ich speichere es auch auf dem Gerät, wenn wir es beim Neustart der App laden möchten.
Nun, das allein reicht nicht aus und wir müssen es natürlich auch tun, wenn
wir uns anmelden, aber das allein reicht nicht aus. Wir brauchen hier eine zusätzliche Information, bevor wir fortfahren.
Weißt du was? Wir müssen wissen, wie lange das Token gültig ist, da Sie
nicht vergessen dürfen, dass es irgendwann abläuft. Aus diesem Grund erhalten Sie beim Anmelden und Registrieren den Schlüssel expiresIn in
der Antwort, der Ihnen in Sekunden angibt, wie lange es dauert, bis Ihr Token verfügbar ist ist ungültig und Firebase akzeptiert es
nicht mehr.
Wir müssen diese Informationen auch speichern, denn wenn wir später wiederkommen und die App nach drei Stunden neu starten,
ist unser Token wahrscheinlich ungültig. Daher müssen wir wissen, wann das Token
ungültig wird, damit wir, wenn wir das überprüfen,
wann das Wenn die App neu gestartet wird und wir prüfen, ob wir ein Token haben, wissen wir,
ob das Token, das wir möglicherweise finden, tatsächlich noch relevant ist oder ob es bereits ungültig ist, und wir benötigen sowieso ein
neues Token. In diesem Fall sollten wir den Benutzer nicht automatisch anmelden.
Ich möchte also das Ablaufdatum
speichern und hier das Ablaufdatum als Konstante erstellen, ein neues Datumsobjekt, das am Ende das aktuelle
Datum annehmen und die Ablaufzeit hinzufügen sollte.
Jetzt nimmt das neue Datum ein Datumsobjekt an, aber mit get time erhalten wir sozusagen den aktuellen Zeitstempel in Millisekunden
seit Beginn der Zeit, der hier im Jahr 1970
in Javascript steht.
Das ist also ein Betrag in Millisekunden, und dazu können wir resData hinzufügen. Läuft ab in.
Dies ist eine Anzahl von Sekunden, also müssen wir dies
in Millisekunden konvertieren und es ist auch eine Zeichenfolge, also müssen wir es in eine Zahl konvertieren.
Hier füge ich hier ein Plus hinzu oder parseInt alternativ, um dies in eine Ganzzahl umzuwandeln, und multipliziere dies dann mit
1000, um es von Sekunden in Millisekunden umzuwandeln, da die Zeit auch Millisekunden ergibt.
Dies gibt mir nun einen neuen Zeitstempel in der Zukunft, der die aktuelle Zeit plus
die Ablaufzeit darstellt, und ich verpacke diesen in ein anderes Datumsobjekt, um es von einer
riesigen Millisekundenzahl zurück in ein konkretes Zeitstempel-Datumsobjekt zu konvertieren. Dieses Ablaufdatum müssen wir jetzt auch übergeben, um Daten im
Speicher zu speichern. Daher erwarte ich hier auch das Ablaufdatum, und
wir müssen dies hier einschließen.
Hier kann ich dieses Ablaufdatum benennen, um die Dinge
zu verwechseln. Dies ist mein Ablaufdatum. Dort möchte ich diese nette kleine toISOString-Methode aufrufen, die wir für Datumsobjekte aufrufen können,
da sie dadurch in eine Zeichenfolge in einem standardisierten Format konvertiert
wird Ich möchte sparen.
Dies ist nun das, was ich auch für die Anmeldung tun möchte,
damit dies dort kopiert werden kann. Dies
ist auch das, was
ich dort tun möchte. Erstellen Sie das Ablaufdatum und speichern Sie es im Speicher.
Jetzt speichern wir das im Speicher, was nett ist, aber
jetzt müssen wir dies auch überprüfen, wenn wir uns anmelden. Eine gute Möglichkeit, dies zu tun, besteht darin,
einen neuen Bildschirm zu erstellen, und ich werde diesen tatsächlich außerhalb meiner vorhandenen Ordner im Bildschirmordner erstellen,
aber weder im Shop noch im Benutzer. Ich werde diesen Startbildschirm benennen und Sie können ihn wie Sie auch benennen wollen.
Die Idee ist, dass ich diesen Bildschirm während des Startvorgangs meiner App zeige und herausfinde, ob der Benutzer authentifiziert ist oder
nicht. Dies ist
sehr schnell. Wahrscheinlich wird
dieser Bildschirm beim Starten der App nicht einmal angezeigt. Jetzt erstellen wir hier eine reguläre
React-Komponente, indem wir React from React importieren. Dort importiere ich Inhalte
aus React Native. Um genau zu sein, benötige ich eine
Ansicht, die Aktivitätsanzeige, um einen Ladespinner anzuzeigen, während die App startet, und auch Stylesheet und
auch asynchroner Speicher, da ich hier auch auf asynchronen Speicher zugreifen möchte, um herauszufinden, ob
wir ein gültiges Token haben oder nicht.
Hier habe ich dann meine Startbildschirmkomponente, die eine reguläre React-Komponente ist, und
das Stylesheet-Objekt hier mit Stylesheet. erstellen und am Ende können wir diesen Startbildschirm so exportieren. Jetzt in der Komponente werde ich hier
einfach den Aktivitätsindikator mit einer Größe von groß und einer Farbe von Farben präsentieren. primär und dafür müssen Sie diese Farben natürlich
konstant importieren und der Ansicht hier auch einen kleinen Stil zuweisen, und
ich nehme einfach Stile. Bildschirm hier, den wir jetzt zum Stylesheet hinzufügen können
und der sehr einfach sein
sollte, biegen Sie einen, begründen Sie das Inhaltscenter und richten Sie das Elementcenter für einige
vertikal und horizontal zentrierte Inhalte aus. Jetzt passiert natürlich das wirklich Wichtige über dem jsx-Code.
Hier müssen wir jetzt den asynchronen Speicher auf ein gültiges
Token überprüfen, und ich kann dies mit Hilfe des Verwendungseffekts tun, der es mir ermöglicht, hier eine
Logik auszuführen, wenn diese Komponente gemountet
und in der Tat brauche ich hier keine Abhängigkeiten, da ich hier innerhalb des Nutzungseffekts jetzt eine neue Funktion hinzufügen möchte, die ich als "Anmelden" oder
"Anmelden" bezeichnen möchte. Ich verwende die separate Funktion, weil ich hier bin Wenn Sie Async Wait verwenden möchten, was ich
tun kann, indem Sie die innere Funktion erstellen, die ich jetzt hier aufrufen kann, versuchen Sie es mit
Login, da
Async hier auf dieser Funktion, die Sie an den Effekt übergeben, nicht wirklich zulässig ist
und hier beim Versuch Login das Ziel ist Jetzt
müssen Sie den asynchronen Speicher auf ein gültiges Token überprüfen. Daher erhalte ich meine Benutzerdaten hier, indem ich auf AsyncStorage
zugreife. getItem
und verwenden Sie dann den Schlüssel, den Sie zum Speichern verwendet haben.
In meinem Fall handelt es sich also um Benutzerdaten, aber Sie müssen den Schlüssel verwenden, den Sie in Ihrer Authentifizierung verwendet haben. js-Datei im Aktionsordner zum
Speichern Ihrer Daten mit asynchronem Speicher. Ich rufe dies ab und jetzt ist es wichtig
zu wissen, dass get item, wie alle asynchronen Speichermethoden, tatsächlich asynchron ist, was bedeutet, wie der Name vermuten
lässt, was bedeutet, dass Sie hier ein Versprechen erhalten, sodass wir darauf warten können
und Dadurch erhalten wir unsere Benutzerdaten zurück.
Dies sind dann die Daten als Zeichenfolge. Um sie in ein Datenelement zu konvertieren, mit dem
wir arbeiten können, habe ich meine transformierten Daten mit JSON. Wenn Sie Benutzerdaten analysieren, wird eine Zeichenfolge im
JSON-Format analysiert und in ein Javascript-Objekt oder -Array konvertiert. Bevor ich das überhaupt versuche, werde ich prüfen, ob die Benutzerdaten nicht wahr sind. Wenn
sie
also nicht festgelegt sind, können wir keine Daten für diesen Schlüssel finden, da ich weiß, dass wir mit Sicherheit
nicht angemeldet sind.
Hier möchte ich zurückkehren und nicht fortfahren und eine wichtige
Sache tun. Ich verwende die Requisitennavigation und navigiere zum Authentifizierungsbildschirm, da dieser Startbildschirm zum Navigator hinzugefügt werden
muss,
damit wir ihn hier importieren und den Startbildschirm importieren können Natürlich aus dem Ordner "Bildschirme", Startbildschirm und wir
fügen ihn hier im Navigator zum Hauptbildschirm hinzu.
Wo wir also auch Auth und Shop haben und dort ganz oben, füge ich Start hinzu und zeige auf meinen Startbildschirm.
Dies bedeutet, dass dies das erste ist, was ich hier lade.
Auf diesem Startbildschirm gehe ich daher zum Authentifizierungsbildschirm, wenn wir kein Token finden können.
Dank des Switch-Navigators verlasse ich diesen Bildschirm und gehe zum Authentifizierungsbildschirm oder zum
Authentifizierungsstapel, weil ich ihn nicht finde ein Zeichen. Wenn wir es also über diese Prüfung hinaus schaffen, haben wir zumindest einige Daten, aber das Token
ist möglicherweise immer noch ungültig.
Wir haben also natürlich das Token, die Benutzer-ID und das Ablaufdatum, die wir aus den transformierten Daten nach dieser
Zeile extrahieren können, hier
mit dieser Objektzerstörungssyntax, und dies sind
die drei Daten mit den drei exakt gleichen Namen, die ich speichere es hier in der
auth. js Datei. Hier
haben wir also ein Objekt mit einem Token, einer
Benutzer-ID und einem Ablaufdatum.
Das speichern wir im asynchronen Speicher. Das kann ich hier abrufen.
Jetzt müssen wir prüfen, ob das Token noch
gültig ist. Dazu kann ich mein Ablaufdatum neu erstellen, indem ich ein neues Datum verwende und das Ablaufdatum übergebe, das eigentlich eine Zeichenfolge im ISO-Format ist.
Jetzt können wir eine if-Prüfung hinzufügen
und prüfen, ob Ablaufdatum, also das Datum, an dem das Token
ungültig wird, wenn es kleiner oder gleich dem neuen Datum ist. Dies ist der aktuelle Zeitstempel, was bedeutet,
dass das Ablaufdatum in der Vergangenheit liegt. Wenn dies in der Vergangenheit liegt, ist unser Token ungültig.
Es ist auch ungültig, wenn wir kein Token finden können oder wenn
wir keine Benutzer-ID finden können. Wenn eine der drei Bedingungen erfüllt ist, haben wir ein ungültiges Token
oder eine ungültige Benutzer-ID oder ähnliches.
In diesem Fall möchte ich auch zurückkehren
und natürlich zum Authentifizierungsbildschirm navigieren. Wenn wir es über diese Prüfung hinaus schaffen,
haben wir ein Token, eine Benutzer-ID und das Token ist noch gültig.
Wenn du es hier schaffst, rufe ich Requisiten an. Navigation. Navigieren Sie im Shop, um zum Shop-Bildschirm
zu gelangen. Außerdem muss ich den Benutzer anmelden. Dazu benötigen wir
eine neue Aktion, da ich jetzt keine Anfrage senden möchte.
Ich möchte nur einige Daten in Redux ändern. Also füge ich hier einen neuen
Aktionsersteller hinzu, exportiere const authenticate, der möglicherweise meine Benutzer-ID und mein Token verwendet und dann zum Ändern meiner Daten in Redux verwendet wird. Dazu füge ich jetzt
eine
neue Aktionskennung hinzu, die mit einer Zeichenfolge authentifiziert wird Um hier zu authentifizieren und hier als Typauthentifizierung zu verwenden, hängen
Sie meine Benutzer-ID an, die hier meine Benutzer-ID ist, und mein Token, das das Token,
das ich als Argument erhalte, und jetzt möchte ich diese Authentifizierungsaktion hier auf
dem Startbildschirm auslösen.
Aber bevor ich das mache, können wir übrigens auch zum Aktionsersteller zurückkehren und
am Ende der Anmeldung, anstatt meine eigene benutzerdefinierte Anmeldeaktion hier auszulösen, können wir auch die Authentifizierung senden
und
diese hier, diesen Aktionsersteller, ausführen und einfach resData weiterleiten. localId als userId und resData. idToken als Token
und machen Sie dasselbe am Ende der Anmeldung.
Jetzt habe ich diese beiden Flows tatsächlich kombiniert, weil am Ende das Gleiche passiert. Jetzt
können wir im Reduzierer, im Authentifizierungsreduzierer, anstatt die Anmeldung und Anmeldung zu überprüfen, einfach die Authentifizierung importieren
und diese Kennung hier verwenden. Werde die Anmeldung los und ich werde es nur auskommentieren, um es hier noch
als Referenz zu leben, weil das gleiche passiert.
Jetzt macht es also Sinn, es zu kombinieren, da wir es auch für diese automatische Anmeldung benötigen.
Also hier versende ich es dann auch hier für die manuelle Anmeldung und die manuelle Anmeldung
und natürlich können Sie damit jetzt, wenn Sie möchten, auch die Anmeldung und Anmeldung dieser beiden Kennungen hier loswerden,
weil wir dies nicht tun benutze sie nicht mehr.
Aber damit, zurück zum Startbildschirm, können wir dies jetzt
auch versenden. Dazu müssen Sie nur noch den Versand aus React Redux importieren und die Aktion importieren. Importieren Sie also alles als Authentifizierungsaktionen, möglicherweise aus
dem Speicherordner, aus dem Aktionsordner und von der Authentifizierungsdatei dort und dann hier am Anfang erhalten Sie Zugriff
auf die Versandfunktion,
indem Sie use dispatch aufrufen. Wenn dies verfügbar ist, können wir den Versand als Abhängigkeit hinzufügen,
dies wird sich jedoch nie ändern, sodass der Effekt niemals erneut ausgeführt wird
und hier, nachdem ich zum Shop navigiert habe, möchte ich jetzt auch Authentifizierungsaktionen auslösen, um
die extrahierte Benutzer-ID zu authentifizieren und weiterzuleiten, also dieses Feld hier und das extrahierte Token, also dieses Feld, das ich von meinem asynchronen
Speicher erhalten habe und das mich jetzt automatisch anmelden sollte . Das war viel Arbeit, mal sehen,
ob das funktioniert. Wenn ich dies neu lade, lande ich hier auf dem
Anmeldebildschirm, da derzeit keine gültigen Token im asynchronen Speicher gespeichert sind.
Wenn ich mich jetzt hier anmelde, werde ich weitergeleitet. Wenn ich jetzt neu lade, lande ich wieder hier und das ist großartig, denn
jetzt bedeutet dies, dass dies zu funktionieren scheint und das Token gespeichert ist.
Jetzt wäre es natürlich schön, wenn wir uns auch abmelden könnten, denn im Moment gibt es keine Möglichkeit,
dies zu tun.