Quindi, per essere sicuro di essere disconnesso alla scadenza del token, aggiungerò una nuova funzione nella
nostra azione
auth, quindi nella cartella actions in auth. file js, aggiungerò qui una nuova funzione in
cui voglio impostare un timer che scade sostanzialmente quando il token è scaduto. Quindi possiamo chiamare questo timer di logout impostato per esempio
e
lì, mi aspetto di ottenere il tempo di scadenza e qui, possiamo usare il buon vecchio timeout impostato che React Native supporta nella sua versione
Javascript per impostare un timer che scade dopo questo tempo e diciamo che questo è un valore in millisecondi,
quindi è solo un presupposto che ho e dobbiamo assicurarci di passare
i dati in millisecondi quindi. Successivamente questa funzione verrà
eseguita una volta scaduto il token e lì, la domanda è ora cosa facciamo lì?
Bene, alla fine, voglio spedire il
logout qui, giusto?
Quindi, pertanto, il timer di logout impostato non dovrebbe essere una funzione normale, ma in realtà qui
avrò una funzione che sfrutta Redux Thunk, quindi dove abbiamo questa
funzione in una funzione in cui questa funzione interna viene inviata come argomento e quindi una
volta attività asincrona terminata, una volta
scaduto questo timer, possiamo spedire il logout, così possiamo spedire il risultato di questo creatore di azioni che è questa
azione alla fine, in
modo che accada quando il timer è terminato.
Ora quando eseguiamo il logout, desidero anche cancellare tutti i timer in esecuzione perché forse abbiamo
quel timer impostato automaticamente qui che non stiamo ancora impostando ma lo faremo presto, quindi desidero cancellare quel timer
quando ci disconnettiamo manualmente in modo che Non ho
quel timer in corso anche se è ridondante. Quindi possiamo aggiungere una nuova variabile forse nella
parte superiore del file qui che chiamerò timer che non è inizialmente inizializzato e poi qui quando impostiamo
un timer, imposterò il risultato del timeout impostato su timer o memorizzerò il risultato di quello nel
timer che è un puntatore a questo timer e aggiunge una
nuova funzione, forse qui, cancella il timer di logout che ora è una funzione normale, non una funzione che ottiene questa funzione interna di invio
ma una funzione normale in cui chiamo semplicemente il timer di timeout chiaro e il timer è quella variabile che
punta al timer.
Voglio solo verificare se esiste il timer, se non è indefinito e se non è indefinito,
lo chiamerò, il timeout chiaro è una funzione integrata integrata in Javascript per sbarazzarsi di quel timer.
Quindi, con questo,
possiamo cancellare il timer se non ne abbiamo più bisogno e voglio liberarmene
ogni volta che ci disconnettiamo, quindi ogni volta che succede qui, chiamerò il timer di logout chiaro e un'altra cosa che devo fare quando
Il logout è che devo cancellare la mia memoria asincrona ovviamente.
Quindi, qui, posso chiamare l'archiviazione asincrona rimuovere i dati utente dell'articolo, usando nuovamente lo stesso identificativo che ho usato per archiviare i
dati.
Quindi ho usato i dati dell'utente
laggiù, ho bisogno di usare lo stesso identificatore per cancellarli. Ora rimuovi articolo restituisce una promessa e
potremmo
aspettare questo, in tal caso dovremmo restituire quella sintassi interna in cui riceviamo la spedizione
e facciamo il nostro compito asincrono, quindi spostiamo questo codice qui in quello e quindi qui
possiamo spedire questo azione.
Potremmo fare tutto questo se siamo interessati
al risultato di rimuovere l'oggetto ma qui non sono interessato, lo licenzierò e non aspetto
il completamento di questa promessa, invece restituirò immediatamente questo nuovo oggetto azione e confido che questo sarà completo.
Ora, ovviamente, potresti ristrutturarlo, ma è così che lo
farò, questo dovrebbe rimuovere i dati dalla nostra memoria locale. Quindi, con questo, il logout fa questo, abbiamo
la funzione timer logout che imposta un timer che fa il logout una volta scaduto, ora dobbiamo solo
assicurarci di spedire questo creatore di azione del timer di logout qui, che
usiamo questo creatore di azioni e Voglio usarlo quando eseguiamo l'autenticazione. Quindi abbiamo questa autentica azione
qua e là alla fine, ho bisogno di inviare il timer
di logout impostato così come questo qui. Quindi, ora userò effettivamente questa diversa sintassi in
cui abbiamo ottenuto questa funzione interna che riceve l'invio, in modo che qui possa inviare
il timer di logout impostato in modo che questo venga attivato e,
naturalmente, ciò significhi anche che qui invece di restituirlo, abbiamo anche questo deve essere
spedito, quindi spediamo qui due azioni che vanno assolutamente bene. Quindi ho impostato il mio timer e quindi invio
l'azione di autenticazione.
Ora, naturalmente, il timer di disconnessione deve sapere quanto tempo dovrebbe richiedere, è necessario il tempo di scadenza
e mi aspetto di ottenere questo, questo tempo di scadenza solo per confondere i nomi, come argomento qui in autenticazione in modo
da poterlo inoltrare qui al mio timer di disconnessione.
Ciò significa che ogni luogo in cui inviamo l'azione di autenticazione o in cui utilizziamo questo creatore di azioni dovrei dire,
questo in ogni luogo in cui lo facciamo non deve solo fornire l'ID utente e il token ma
anche il tempo di scadenza e che
inizia qui con Iscriviti. Quando ci iscriviamo,
abbiamo la nostra data di scadenza qui e spediamo l'autenticazione. Ora l'autenticazione richiede anche il tempo di
scadenza.
Ora la cosa buona è che è molto facile scoprire quando scade
perché lo abbiamo nei dati di risposta, lì abbiamo questo scade nel campo che è ovviamente
una stringa, quindi con parseInt, possiamo convertirlo in un numero e poi questo sarà in pochi secondi, autenticare e impostare il timer di
logout si aspettano valori in millisecondi, quindi lo
moltiplicherò per 1000 e lo aggiungerò ovviamente anche nel login. Lì, aggiungerò anche questo come terzo argomento
qui in modo che per il login quando
inviamo questa azione di autenticazione, inoltriamo anche il nostro tempo di scadenza che stiamo
tornando da Firebase. Ora abbiamo anche un altro posto in
cui dobbiamo farlo e questa è
la schermata di avvio perché lì spediamo anche l'autenticazione e qui dobbiamo calcolare il tempo rimanente perché questo entra in
funzione ogni volta
che riavviamo l'app, quindi qui non sappiamo quanto tempo impiegherà il
token a scadere e dobbiamo calcolarlo.
Quindi qui posso calcolare il tempo di scadenza prendendo fondamentalmente la data di scadenza che è un oggetto data e chiamando ottenere
il tempo su di esso che mi dà il suo timestamp in millisecondi dall'inizio del
tempo e
da quello che devo dedurre il timestamp attuale ottenere tempo, quindi il
timestamp corrente in millisecondi. Questo sarà in futuro, questo è
ora quindi
la differenza dovrebbe essere un numero positivo perché sto verificando che questo sia in futuro
qui, quindi questo dovrebbe essere un numero positivo in millisecondi.
Quindi ora il tempo di scadenza qui può essere inoltrato per l'autenticazione e, con ciò, dovremmo avere anche il
logout automatico.
Ora per
confermare che funziona, andiamo all'autor. file js e in realtà lì, nella funzione timer di logout
impostato, dividerò temporaneamente il tempo di scadenza per 1000, il che significa che dividerò i millisecondi per 1000 che li trasforma
in secondi e ciò
significa che dovremmo essere immediatamente disconnessi ora.
Se ricarico, sono disconnesso ma noterai presto che in teoria funziona. Se eseguo nuovamente l'accesso, eseguo l'accesso e
ora da quando ho diviso il valore per 1000, dovrei
essere disconnesso dopo 3. 6 secondi ma non lo sono. Posso navigare, ma
se ricarico, infatti ora sono disconnesso. Quindi ha ripulito i dati ma non ci ha riportato alla schermata di
autenticazione e
il motivo è che non abbiamo mai incaricato React Native di tornare alla schermata di autenticazione, quindi questo
è il pezzo mancante.
Cancellare il nostro negozio Redux è bello ma in risposta a tale autorizzazione, dobbiamo assicurarci
di essere riportati alla schermata di autenticazione. Per assicurarci che ciò accada, abbiamo bisogno di un posto che sia sempre
reso che avvolga l'intera nostra app in cui possiamo ascoltare il nostro negozio Redux e scoprire quando il nostro token viene ripristinato su null in modo che, se
ciò accade, possiamo tornare indietro al schermata di autenticazione. Ora quella sarebbe l'app. file js perché questo avvolge
tutto ma il
problema è che ho installato Redux qui. Quindi Redux nel mio negozio è disponibile solo all'interno
di qui, quindi nei componenti figlio nidificati e questo è già il mio componente navigatore a cui non
ho accesso diretto.
La soluzione è semplicemente avvolgere questo con un altro componente. Lo creerò nella cartella di
navigazione perché lo chiamerò contenitore di navigazione.
Ora questo è un normale componente React, come questo in cui non
ho bisogno di nulla da React Native ma dove ho appena impostato il mio componente del contenitore di navigazione in cui ricevo
oggetti di scena e restituisco un po 'di jsx alla fine ed esportarlo come contenitore di navigazione predefinito.
Ora lì voglio impostare la mia navigazione, quindi importerò il navigatore del negozio dal navigatore del negozio che si trova nella stessa
cartella e sarà quello che ritorno qui, il mio
navigatore del negozio in questo modo. Ora posso usare il mio contenitore di navigazione qui nell'app. js file, quindi invece di importare
qui il navigatore del negozio, importare il mio contenitore di navigazione dalla cartella di navigazione e dal file del contenitore di
navigazione e qui uso il contenitore di navigazione anziché il navigatore del negozio.
Ora questo è semplicemente un wrapper per il navigatore del negozio, ma poiché è all'interno del provider,
ora ho accesso a Redux lì.
Quindi, qui, possiamo importare utilizzare il selettore da React Redux e usarlo qui per accedere a Redux.
Quindi qui nel contenitore di navigazione, posso semplicemente accedere a isAuth diciamo usando il selettore use che accetta questa funzione che mi dà accesso allo stato Redux e
quindi posso accedere allo stato. auth. token per ottenere l'accesso
al token nella mia slice di stato di autenticazione e utilizzare l'operatore double bang per forzare fondamentalmente questo a essere
vero o falso e se non abbiamo token, questo sarà falso, quindi in questo caso sarà vero
in caso di errore un token sarà vero,
quindi isAuth è vero se abbiamo un token che ha senso immagino. Ora possiamo usare l'effetto qui per reagire ai cambiamenti
in questo.
Quindi qui in uso effect, il mio array di dipendenze include isAuth, quindi
quando isAuth cambia, questa funzione di effetto dovrebbe essere eseguita e quindi qui, posso quindi verificare se non siamo autenticati perché è quello
che mi interessa, se isAuth non
è vero , se è vero non mi interessa ma se non è vero, allora voglio passare alla
schermata di autenticazione e ora abbiamo un altro problema.
Il navigatore è qui e solo nei componenti resi con l'aiuto del navigatore abbiamo accesso
agli oggetti di scena. navigazione. navigare, ma per fortuna, la navigazione React ci offre una via di fuga. Possiamo usare un
ref per ottenere l'accesso alla funzionalità di navigazione con l'aiuto di
questo componente quando lo utilizziamo nel nostro codice jsx. Possiamo creare un tale riferimento con use ref con l'uso ref di hook
e semplicemente creiamo il nostro riferimento di navigazione qui
chiamando use ref in questo modo e dovresti essere a conoscenza dei riferimenti in React che è
fondamentalmente un modo per accedere direttamente a un elemento render in jsx e ora possiamo aggiungere la proprietà ref al navigatore del negozio e
assegnarla a ref di nav o viceversa.
Quindi questo stabilisce una connessione tra la costante di riferimento nav e questo elemento che alla fine viene reso
qui e ora con questo qui nell'effetto, possiamo chiamare navRef. corrente, ecco come funzionano gli
ref,
hanno un invio di proprietà corrente. La spedizione è un metodo reso disponibile dal navigatore del negozio o da questo contenitore di app che alla
fine è perché il contenitore del negozio non è altro che ShopNavigator. js esporta che è un componente del contenitore
di app e questo componente ha un metodo di invio che possiamo usare per
inviare un'azione di navigazione. Per questo, ora
abbiamo bisogno di importare qualcosa dalla navigazione React e che qualcosa è l'oggetto delle azioni di navigazione qui e
poi qui, che chiamiamo NavigationActions. navigare e ora
questo ci consente di navigare. Tuttavia, non con auth come questo, ma ciò richiede un
oggetto come argomento in cui è stato impostato il nome della route e ora può essere auth.
Quindi è così che ora possiamo navigare all'interno di questo componente anche se è al di fuori del navigatore.
Quindi questo va ad auth ogni volta che il nostro stato isAuth diventa non autenticato, questo significa anche che nel navigatore
del negozio, nel nostro pulsante di logout, non abbiamo bisogno di navigare qui perché se attiviamo il logout, se
inviamo questa azione , cancelliamo il token in Redux e quindi questo dovrebbe innescare automaticamente
la nostra navigazione grazie a questo contenitore di navigazione
e quindi ora se lo salviamo, dovremmo navigare in auth quando il token non è valido.
Quindi ora se accedo di nuovo, dopo 3. 6 secondi, dovremmo essere disconnessi e dovremmo vedere
che siamo
disconnessi, sì, sembra buono.
Facciamo un altro tentativo
qui,
sì, tornando indietro e proviamo anche a disconnetterci manualmente. Quindi, se vado al login, apro questo, faccio clic sul logout,
anche questo funziona ancora.
Quindi, con ciò, abbiamo incorporato la funzionalità di
disconnessione automatica, ora torniamo al file di azione auth e rimuoviamo questa divisione fittizia qui perché l'ho
fatto solo per i test, ovviamente non voglio ridurre manualmente il mio
tempo di scadenza , invece ora qui abbiamo una funzionalità che funziona e che ci assicura che non
importa se stiamo registrando o stiamo accedendo o qualunque cosa stiamo facendo, abbiamo un token che conserviamo, che possiamo
usare e noi ci assicuriamo di essere disconnessi automaticamente anche se il token scade.
Questa è l'applicazione finita qui.