Um sicherzustellen, dass wir nach Ablauf des Tokens abgemeldet sind, füge ich unserer Authentifizierungsaktion eine
neue Funktion
hinzu, also im Aktionsordner in der Authentifizierung. js Datei, ich werde hier eine neue Funktion hinzufügen,
in der ich einen Timer einstellen möchte, der im Grunde abläuft, wenn das Token abgelaufen ist. So können wir diesen Set-Logout-Timer zum Beispiel aufrufen und dort
erwarte
ich die Ablaufzeit und hier können wir das gute alte Set-Timeout verwenden, das React Native in seiner Javascript-Version unterstützt, um einen Timer einzustellen, der
nach dieser Zeit abläuft und Nehmen wir an, dies ist ein Wert in Millisekunden. Das ist also nur
eine Annahme, die ich habe, und wir müssen sicherstellen, dass wir die
Daten daher in Millisekunden übergeben. Danach wird diese Funktion
hier ausgeführt, sobald der Token abgelaufen ist, und dort stellt sich nun die Frage, was wir dort tun.
Nun, am Ende möchte ich mich
hier abmelden, oder?
Daher sollte der eingestellte Abmelde-Timer wahrscheinlich keine normale Funktion sein, aber tatsächlich werde ich hier eine Funktion
haben, die Redux Thunk nutzt. Wo wir also diese Funktion in
einer Funktion haben, in der diese innere Funktion als Argument versendet wird und daher einmal Wenn
die asynchrone Aufgabe beendet ist, können
wir nach Ablauf dieses Timers die Abmeldung senden, sodass wir das Ergebnis dieses Aktionserstellers, bei dem es sich letztendlich um
diese Aktion handelt, senden
können. Dies geschieht, wenn der Timer abgelaufen ist.
Wenn wir uns jetzt abmelden, möchte ich auch alle laufenden Timer löschen, da wir hier möglicherweise
den automatisch eingestellten Timer haben, den wir noch nicht einstellen, aber wir werden es bald tun. Dann möchte ich diesen
Timer löschen, wenn wir uns manuell abmelden Ich habe
diesen laufenden Timer nicht, obwohl er überflüssig ist. Daher können wir hier oben in der Datei
eine neue Variable hinzufügen, die ich als Timer bezeichne, der anfangs nicht initialisiert ist. Wenn wir
dann einen Timer einstellen, setze ich das Ergebnis der Zeitüberschreitung auf Timer oder speichere das
Ergebnis davon in Timer, der ein Zeiger auf diesen Timer
ist und eine neue Funktion hinzufügt, vielleicht hier, Logout-Timer löschen, der jetzt eine normale Funktion ist, keine Funktion, die diese innere Versandfunktion erhält,
sondern eine normale Funktion, bei der ich einfach Clear-Timeout-Timer und den aufrufe Timer ist die Variable, die auf den
Timer zeigt.
Ich möchte nur überprüfen, ob der Timer vorhanden ist, ob er nicht undefiniert ist und ob er
nicht undefiniert ist. Ich nenne dies: Clear Timeout ist eine in Javascript integrierte Funktion, um diesen Timer loszuwerden.
Damit können wir
den Timer löschen, wenn wir ihn nicht mehr benötigen, und ich möchte ihn
entfernen, wenn wir uns abmelden. Wenn dies hier geschieht, rufe ich den Timer zum Löschen der Abmeldung auf und eine andere Sache, die ich tun
muss, wenn Ich melde mich ab, um meinen asynchronen Speicher zu löschen.
Hier kann ich also den asynchronen Speicher aufrufen, um Benutzerdaten von Elementen zu entfernen, wobei wiederum dieselbe Kennung verwendet wird, die ich zum Speichern der Daten
verwendet habe.
Da ich dort unten Benutzerdaten
verwendet habe, muss ich zum Löschen dieselbe Kennung verwenden. Wenn Sie nun den Artikel entfernen, wird ein
Versprechen
zurückgegeben, und wir könnten darauf warten. In diesem Fall müssten wir die innere Syntax zurückgeben, in der wir den
Versand erhalten, und wir führen unsere asynchrone Aufgabe aus. Daher verschieben wir diesen Code hier hinein und dann können
wir diesen hier versenden Aktion.
Wir könnten das alles tun, wenn wir am Ergebnis des
Entfernens eines Elements interessiert sind, aber hier bin ich nicht interessiert. Ich werde dies einfach abfeuern und nicht darauf
warten, dass dieses Versprechen erfüllt wird. Stattdessen gebe ich dieses neue Aktionsobjekt sofort zurück und ich vertraue darauf, dass dies abgeschlossen wird.
Jetzt können Sie dies natürlich umstrukturieren, aber so werde ich
es tun. Dadurch sollten die Daten aus unserem lokalen Speicher entfernt werden. Damit hat logout dies, wir haben die
Logout-Timer-Funktion, die einen Timer festlegt, der sich abmeldet, sobald dies abläuft. Jetzt müssen wir nur noch sicherstellen, dass
wir diesen Set Logout Timer Action Creator hier versenden, dass wir diesen Action
Creator verwenden und Ich möchte dies verwenden, wenn wir uns authentifizieren. Also haben wir diese
Authentifizierungsaktion hier und da am Ende, ich muss den eingestellten
Abmelde-Timer sowie diesen hier versenden. Dort werde ich nun tatsächlich diese andere Syntax
verwenden, bei der wir diese innere Funktion erhalten haben, die den Versand empfängt, so dass ich
hier den eingestellten Abmelde-Timer versenden kann, damit dies hier ausgelöst wird, und dies
bedeutet natürlich auch, dass wir hier anstatt dies zurückzugeben müssen dies auch versenden, also
versenden wir hier zwei Aktionen, was absolut in Ordnung ist. Also stelle ich meinen Timer ein und sende dann
die Authentifizierungsaktion aus.
Jetzt muss der Abmelde-Timer natürlich wissen, wie lange es dauern sollte, die Ablaufzeit ist erforderlich,
und ich erwarte, dass diese Ablaufzeit nur zum Verwechseln von Namen als Argument hier in authentifizieren angezeigt wird, damit
ich dies hier weiterleiten kann zu meinem Logout-Timer.
Das bedeutet, dass jeder Ort, an dem wir die Authentifizierungsaktion auslösen oder an dem wir
diesen Aktionsersteller verwenden, nicht nur die Benutzer-ID und das Token, sondern auch die Ablaufzeit
angeben muss. Dies beginnt
hier mit Anmelden. Wenn wir uns
anmelden, haben wir hier unser Ablaufdatum und versenden authentifiziert. Jetzt benötigt die Authentifizierung auch die
Ablaufzeit.
Das Gute ist, dass es hier sehr einfach ist herauszufinden, wann dies abläuft,
da wir es in den Antwortdaten haben. Dort läuft es in einem Feld ab, das natürlich eine
Zeichenfolge ist. Mit parseInt können wir dies also in eine Zahl konvertieren und dann wird dies in Sekunden sein, authentifizieren und setzen Logout-Timer erwarten Werte
in Millisekunden, also werde ich dies mit 1000
multiplizieren und ich werde dies natürlich auch beim Login hinzufügen. Dort werde ich dies auch als
drittes Argument hinzufügen, damit wir für die
Anmeldung, wenn wir diese Authentifizierungsaktion auslösen, auch unsere Ablaufzeit weiterleiten, die wir
von Firebase zurückerhalten. Jetzt haben wir noch einen anderen Ort, an
dem wir das tun müssen, und das
ist der Startbildschirm, da wir dort auch die Authentifizierung versenden und hier die verbleibende Zeit berechnen müssen, da dies bei jedem Neustart der
App einsetzt. Hier
wissen wir es also nicht Wie lange dauert es, bis der Token
abläuft, und wir müssen dies berechnen.
Hier kann ich also die Ablaufzeit berechnen, indem ich im Grunde genommen das Ablaufdatum nehme, das ein Datumsobjekt ist, und
get time darauf aufrufe, das mir den Zeitstempel in Millisekunden seit Beginn der
Zeit gibt,
und von dem ich die aktuelle Zeitstempel-Abrufzeit abziehen muss. also der
aktuelle Zeitstempel in Millisekunden. Dies wird in der Zukunft sein,
dies ist jetzt
so, dass der Unterschied eine positive Zahl sein sollte, da ich überprüfe, dass dies hier in der
Zukunft liegt, also sollte dies eine positive Zahl in Millisekunden sein.
Jetzt kann die Ablaufzeit hier zur Authentifizierung weitergeleitet werden. Damit sollten wir uns auch automatisch
abmelden.
Um zu überprüfen,
ob dies funktioniert, gehen wir zur Authentifizierung. js-Datei und tatsächlich dort, in der eingestellten Abmelde-Timer-Funktion, teile ich
die Ablaufzeit vorübergehend durch 1000, was bedeutet, dass ich die Millisekunden durch 1000 teile, was sie in Sekunden umwandelt,
und das bedeutet, dass
wir jetzt sofort abgemeldet werden sollten.
Wenn ich neu lade, bin ich abgemeldet, aber Sie werden bald feststellen, dass es nur theoretisch funktioniert. Wenn ich mich erneut anmelde, bin ich
angemeldet und da ich den Wert durch 1000 geteilt habe, sollte
ich nach 3 abgemeldet sein. 6 Sekunden aber ich bin nicht. Ich kann herum navigieren, aber
wenn ich neu lade, bin ich jetzt tatsächlich abgemeldet. Es hat also die Daten irgendwie bereinigt, aber es hat uns nicht zurück
zum Authentifizierungsbildschirm
navigiert, und der Grund dafür ist, dass wir React Native niemals anweisen, uns zurück zum Authentifizierungsbildschirm zu navigieren. Das
ist also das fehlende Teil.
Das Löschen unseres Redux-Speichers ist nett, aber als Reaktion auf diese Freigabe müssen
wir sicherstellen, dass wir zum Authentifizierungsbildschirm zurückkehren. Um dies sicherzustellen, benötigen wir einen Ort, der immer gerendert wird
und unsere gesamte App umschließt. Dort können wir unseren Redux-Store anhören und herausfinden, wann unser Token auf Null zurückgesetzt wird, damit wir in
diesem Fall zurück zum navigieren können Authentifizierungsbildschirm. Das wäre die App. js Datei, weil das alles einschließt,
aber das Problem
ist da drin. Ich habe Redux hier eingerichtet. Redux in meinem Shop ist also nur innerhalb von
hier verfügbar, also in verschachtelten untergeordneten Komponenten, und das ist bereits meine Navigatorkomponente, auf die ich keinen direkten
Zugriff habe.
Die Lösung besteht darin, dies einfach mit einer anderen Komponente zu umwickeln. Ich werde das im Navigationsordner
erstellen, weil ich es Navigationscontainer nennen werde.
Dies ist eine normale React-Komponente wie diese, bei
der ich nichts von React Native benötige, sondern nur meine Navigationscontainerkomponente einrichte, in der ich Requisiten
erhalte und am Ende etwas jsx zurückgebe und diese als Standardnavigationscontainer exportiere.
Jetzt dort möchte ich meine Navigation einrichten, also importiere ich den Shop-Navigator aus dem Shop-Navigator, der sich im
selben Ordner befindet, und das werde ich
hier zurückgeben, meinen Shop-Navigator so. Jetzt kann ich meinen Navigationscontainer hier in der App verwenden. js-Datei. Anstatt den Shop-Navigator
hier zu importieren, importiere ich meinen Navigationscontainer aus dem Navigationsordner und dem aus der
Navigationscontainer-Datei und verwende hier den Navigationscontainer anstelle des Shop-Navigators.
Jetzt ist dies einfach ein Wrapper um den Shop-Navigator, aber da er sich innerhalb des Anbieters befindet, habe
ich dort jetzt Zugriff auf Redux.
Hier können wir also den Verwendungsselektor aus React Redux importieren und diesen hier verwenden, um auf Redux zuzugreifen.
Hier im Navigationscontainer kann ich einfach auf isAuth zugreifen, indem ich beispielsweise den Use Selector verwende, der diese Funktion übernimmt, mit der ich auf den Redux-Status zugreifen kann, und
dann auf den Status zugreifen kann. auth. Token, um Zugriff auf das
Token in meinem Auth-Status-Slice zu erhalten und den Double-Bang-Operator zu verwenden, um zu erzwingen, dass dies wahr oder falsch ist.
Wenn wir kein Token haben, ist dies falsch, also ist isAuth in diesem Fall falsch, wenn wir
haben Ein Token wird wahr sein, also ist
Wahrheit wahr, wenn wir ein Token haben, das Sinn macht, denke ich. Jetzt können wir den Effekt hier nutzen, um auf Änderungen
zu reagieren.
Wenn hier also ein Effektarray verwendet wird, enthält mein Abhängigkeitsarray isAuth. Wenn sich
also isAuth ändert, sollte diese Effektfunktion ausgeführt werden. Daher kann ich hier überprüfen, ob wir nicht authentifiziert sind, da dies für mich wichtig
ist, wenn isAuth nicht wahr ist
Wenn es wahr ist, ist es mir egal, aber wenn es nicht wahr ist, dann möchte ich zum
Authentifizierungsbildschirm navigieren und jetzt haben wir ein anderes Problem.
Der Navigator ist hier und nur in Komponenten, die mit Hilfe des Navigators gerendert werden, haben
wir Zugriff auf Requisiten. Navigation. Navigieren Sie, aber dankenswerterweise gibt uns die React-Navigation eine Notluke. Wir können eine
Referenz verwenden, um mithilfe dieser Komponente Zugriff auf die Navigationsfunktionen zu
erhalten, wenn wir sie in unserem jsx-Code verwenden. Wir können einen solchen Ref mit use ref mit dem use ref hook erstellen
und wir erstellen hier einfach unseren nav ref, indem
wir use ref wie diesen aufrufen. Sie sollten sich der Referenzen in React bewusst sein, die im Grunde eine
Möglichkeit für Sie sind, direkt auf ein Element zuzugreifen, das Sie haben In jsx rendern und jetzt können wir die ref-Eigenschaft zum Shop-Navigator hinzufügen und
diese der nav ref zuweisen oder umgekehrt.
Dies stellt also eine Verbindung zwischen der nav ref-Konstante und diesem Element her, das am Ende hier und jetzt
mit diesem hier im Effekt gerendert wird, können wir navRef aufrufen. aktuell, so funktionieren
refs,
sie haben einen aktuellen eigenschaftsversand. Der Versand ist eine Methode, die vom Shop-Navigator oder von diesem App-Container zur Verfügung gestellt wird. Dies ist letztendlich
der Fall, da der Shop-Container nichts anderes als der ShopNavigator ist. js exportiert eine solche App-Container-Komponente,
und diese Komponente verfügt über eine Versandmethode, mit der wir eine
Navigationsaktion versenden können. Dafür müssen wir
jetzt etwas aus der React-Navigation importieren und dass hier und hier etwas das Navigationsaktionsobjekt ist, rufen
wir hier NavigationActions auf. navigieren und
jetzt können wir navigieren. Allerdings nicht mit einer solchen Authentifizierung, sondern erfordert ein
Objekt als Argument, in dem Sie den Routennamen einrichten. Dies kann nun eine Authentifizierung sein.
So können wir jetzt innerhalb dieser Komponente navigieren, obwohl sie sich außerhalb des Navigators befindet.
Dies geht also immer dann zur Authentifizierung, wenn sich unser isAuth-Status in "Nicht authentifiziert" ändert. Dies bedeutet übrigens auch,
dass wir im Shop-Navigator auf unserer Abmeldeschaltfläche nicht hier navigieren müssen, da wir diese Aktion auslösen, wenn
wir die Abmeldung auslösen Wenn wir das Token in Redux löschen, sollte dies
dank dieses Navigationscontainers automatisch unsere Navigation auslösen. Wenn
wir das speichern, sollten wir jetzt zu auth navigieren, wenn das Token ungültig ist.
Also jetzt, wenn ich mich wieder anmelde, nach 3. 6 Sekunden sollten wir abgemeldet sein und wir sollten sehen, dass
wir abgemeldet sind,
ja das sieht gut aus.
Versuchen wir es hier noch
einmal,
ja, gehen wir zurück und versuchen wir auch, uns manuell abzumelden. Wenn ich mich anmelde, öffne dies und klicke auf Abmelden.
Dies funktioniert auch weiterhin.
Damit haben wir die integrierte Funktion zum automatischen
Abmelden. Kehren wir nun zur Auth-Aktionsdatei zurück und entfernen diese Dummy-Unterteilung hier, da ich dies nur zum
Testen getan habe. Natürlich möchte ich meine Ablaufzeit nicht manuell verkürzen Stattdessen
haben wir jetzt hier eine Funktion, die funktioniert und sicherstellt, dass wir unabhängig davon, ob wir uns anmelden oder
anmelden oder was auch immer wir tun, ein Token haben, das wir speichern, das wir verwenden können und das
wir Stellen Sie sicher, dass wir auch automatisch abgemeldet werden, wenn unser Token abläuft.
Dies ist die fertige Anwendung hier.