Quindi abbiamo ottenuto molto,
siamo in grado di scrivere dati, recuperare dati,
utilizzare il nostro token per oscillare i dati o per identificare
i prodotti e gli ordini per il nostro utente attualmente connesso,
siamo in grado di accedere e così
via e questo è tutto bello.
Una cosa che non stiamo facendo in questo momento è che non stiamo continuando le nostre
sessioni, per così dire. Se ricarico, devo sempre accedere
di nuovo e
non è proprio quello che voglio, sarebbe bello se potessimo accedere automaticamente se disponiamo di un token
valido e per questo dobbiamo fare due cose: dobbiamo memorizzare il token da qualche parte sul dispositivo, non in Redux perché
Redux è in memoria e questo andrà perso ogni volta che l'app si riavvia.
Quindi, per così dire, deve trovarsi da
qualche parte sul disco rigido del dispositivo e, inoltre, dobbiamo controllare tale memoria ogni volta che la nostra app viene avviata, impostare
automaticamente il token in Redux e reindirizzare l'utente se troviamo un token valido lì.
Ora cominciamo con l'archiviazione perché è un primo passo logico. Per archiviare, è necessario
importare qualcosa qui, non nel creatore dell'azione
prodotti, ma in realtà qui nel creatore dell'azione auth, è necessario importare l'archiviazione asincrona da React Native.
Con quello importato,
possiamo usarlo per salvare i dati sul dispositivo, l'archiviazione asincrona è un'API nativa React che alla fine utilizza un archivio di valori chiave
sul dispositivo che è disponibile sia su iOS che su Android dove possiamo archiviare dati che
persistono tra i riavvii delle app, in modo che possiamo utilizzare per salvare i dati che non vanno
persi all'avvio o al riavvio dell'app.
Quindi aggiungerò una nuova funzione, salverò i dati nello spazio di archiviazione o qualcosa del genere e
lì mi aspetto di ottenere il mio token e il mio ID utente, i due pezzi di dati che mi interessano qui
e ora possiamo usare l'archivio asincrono per imposta un elemento che è il modo in cui salvi i dati e quell'elemento che imposti deve essere una stringa ma
prima di tutto devi definire una chiave e
darò un nome ai dati dell'utente, ma dipende da te,
avrai bisogno di quella chiave in seguito per recuperare i tuoi dati e
il secondo valore ora
è una stringa, quindi la stringa che vuoi salvare lì e devi essenzialmente salvare una stringa.
Ora
non è un problema, possiamo usare JSON. stringify per convertire un oggetto Javascript in una stringa e
l'oggetto che voglio convertire è un oggetto che contiene il mio token che ottengo qui come argomento e contiene userId
che ottengo come argomento.
Quindi, alla fine, salviamo questo oggetto come stringa sul dispositivo.
Ora abbiamo solo bisogno di chiamare i dati di salvataggio in memoria ogni volta che abbiamo terminato l'accesso o la registrazione, quindi qui forse dopo aver
inviato il login, possiamo chiamare i dati di salvataggio in memoria e inoltrare resData. idToken
e resData. localId, quindi le stesse cose che usiamo in
Redux e vogliamo sicuramente usarle lì perché Redux è importante
per l'applicazione in esecuzione, ma lo salvo anche sul dispositivo per quando vogliamo caricarlo al riavvio dell'app.
Ora, tuttavia, che da solo non farà il trucco e ovviamente dobbiamo farlo anche al momento
della registrazione, ma che da solo non farà il trucco, avremo bisogno di un'informazione in più qui prima di continuare.
Sai quale? Dobbiamo sapere per quanto tempo il token è valido perché non
devi dimenticare che alla fine scadrà, motivo per cui per l'accesso e la registrazione, ottieni che scade Nella chiave
nella risposta che ti dice in pochi secondi quanto tempo impiega fino al token non è valido e Firebase non lo
accetterà più.
Dobbiamo anche archiviare tali informazioni perché se torniamo in seguito, se riavviamo l'app dopo tre ore, il nostro
token è probabilmente non valido, quindi dobbiamo sapere quando il token
verrà invalidato in modo che quando verifichiamo
che, quando il l'app si riavvia, quando controlliamo se disponiamo di un token, sappiamo se quel
token che potremmo trovare è in realtà ancora rilevante o se non è già valido e abbiamo comunque bisogno di
un nuovo token, nel qual caso non dovremmo accedere automaticamente all'utente.
Quindi voglio memorizzare la data di
scadenza e creerò qui la data di scadenza come costante, un nuovo oggetto data che alla fine dovrebbe
prendere la data corrente e aggiungere l'ora di scadenza.
Ora la nuova data accetta un oggetto data ma con get time, otteniamo il timestamp corrente in millisecondi dall'inizio
del tempo, per così dire, che è nel qui
1970 in Javascript.
Quindi questo è un importo in millisecondi e, a ciò, possiamo aggiungere resData. scade tra.
Questa è una quantità di secondi, quindi dobbiamo
convertirla in millisecondi ed è anche una stringa, quindi dobbiamo convertirla in un numero.
Quindi qui aggiungerò un plus qui o semplicemente analizzerò alternativamente per convertirlo in un numero intero e quindi lo moltiplicherò per
1000 per convertirlo da secondi a millisecondi perché ottenere tempo ci dà anche millisecondi.
Ora ciò che mi dà è un nuovo timestamp in futuro, che è l'ora corrente più
il tempo di scadenza e lo avvolgo in un altro oggetto data per convertirlo da un
enorme numero di millisecondi in un oggetto data timestamp concreto. Questa data di scadenza è ora ciò che dobbiamo anche passare per salvare
i dati nella memoria, quindi qui mi aspetto di ottenere anche la data
di scadenza e dobbiamo racchiuderla qui.
Quindi qui posso nominare questa data di scadenza forse
per mescolare le cose, questa è la mia data di scadenza e lì voglio chiamare questo bel metodo toISOString che possiamo chiamare
su oggetti data perché questo lo convertirà in una stringa in un
formato standard che Voglio salvare
Ora questo è quello che voglio fare anche per l'iscrizione, quindi
questo può essere copiato lì e
questo è quello che
voglio fare anche lì, creare la data di scadenza e salvarla nella memoria.
Ora lo stiamo salvando nello spazio di archiviazione che è
bello, ma ora dobbiamo anche verificarlo quando eseguiamo l'accesso. Un bel modo per farlo è quello di creare
una nuova schermata e in realtà la creerò al di fuori delle mie cartelle esistenti nella cartella
delle schermate ma né nello shop né nell'utente e darò un nome a questa schermata di avvio e puoi nominarla comunque volere.
L'idea è che mostro questa schermata mentre la mia app si sta avviando e sto scoprendo se l'utente è autenticato o
meno e questo
sarà super veloce, è
probabile che non vedremo nemmeno quella schermata all'avvio dell'app. Ora qui, creiamo un componente React
regolare importando reagire da reagire e lì, importa roba da React
Native, per essere precisi ho bisogno di una vista, l'indicatore
di attività per mostrare uno spinner di caricamento mentre l'app si sta avviando e anche
foglio di stile e archiviazione asincrona perché qui voglio anche accedere all'archiviazione asincrona per scoprire
se abbiamo un token valido o meno.
Quindi qui ho il mio componente della schermata di avvio che è un normale componente React e
l'oggetto foglio di stile qui con Stylesheet. creare e alla fine, possiamo esportare questa schermata di avvio in questo modo. Ora nel componente, presenterò semplicemente l'indicatore
di attività qui con una dimensione grande e un colore di Colori. primario e per questo è necessario importare quei
colori, ovviamente, e assegnare anche un po 'di stile alla vista e
prenderò solo gli stili. schermata qui che ora possiamo aggiungere al foglio
di stile e che dovrebbe
essere molto semplice, flessibile, giustificare il centro contenuti e allineare il centro elementi per
alcuni contenuti centrati verticalmente e orizzontalmente. Ora ovviamente le cose veramente importanti accadono sopra
il codice jsx, qui è dove ora dobbiamo controllare l'archiviazione
asincrona per un token valido e posso farlo con l'aiuto dell'effetto use che mi permette di eseguire
un po 'di logica qui quando
questo componente montato e in effetti qui, non avrò bisogno di dipendenze perché qui all'interno dell'effetto d'uso, ora voglio aggiungere una nuova funzione che
chiamerò provare ad iscriversi o provare ad accedere è più adatto e io uso la funzione separata perché qui
voglio usare async wait che posso fare creando quella funzione interiore che ora posso chiamare qui, prova
ad
accedere perché di nuovo, async qui su questa funzione che passi per usare l'effetto non
sarebbe davvero permesso e qui in prova login,
l'obiettivo ora è controllare l'archivio asincrono per un token valido. Quindi ottengo qui i miei dati utente accedendo a
AsyncStorage. getItem
e quindi utilizzare la chiave utilizzata per l'archiviazione.
Quindi nel mio caso si tratta di dati utente ma è necessario utilizzare qualsiasi chiave utilizzata nella propria autenticazione. file js nella cartella actions
per l'archiviazione dei dati con l'archiviazione asincrona. Quindi ho recuperato questo e ora la cosa importante da sapere
qui è che ottenere l'oggetto, come tutti i metodi di archiviazione asincroni, in realtà è asincrono, il che significa che
il nome suggerisce suppongo, il che significa che ottieni una promessa qui, quindi possiamo aspettare questo
e questo ci restituirà i nostri dati utente.
Ora questi sono i dati come una stringa, per convertirli in un pezzo di dati su
cui possiamo lavorare, avrò i miei dati trasformati con JSON. analizza i dati dell'utente e questo analizza una stringa in
formato JSON e li converte in un oggetto o un array Javascript. Ora prima ancora di provarlo, controllerò se i dati dell'utente non sono veri, quindi se
non
sono impostati, se non riusciamo a trovare alcun dato per quella chiave perché allora so che sicuramente non abbiamo
effettuato l'accesso.
Quindi qui voglio tornare e non continuare e fare una cosa
importante, userò la navigazione dei puntelli e navigherò alla schermata di autenticazione perché questa schermata di avvio deve
essere
aggiunta al navigatore, quindi qui possiamo importarla, importare la schermata di avvio dalla cartella delle schermate ovviamente, schermata
di avvio e la aggiungiamo alla principale nel
navigatore qui, quindi dove abbiamo anche auth e shop e lì in cima, aggiungo avvio e punto alla mia schermata di avvio.
Ciò significa che questa è la prima cosa che carico qui.
Ora su questa schermata di avvio, quindi, vado alla schermata di autenticazione se non riusciamo a trovare
un token, quindi grazie allo switch navigator, lascio quella schermata e vado alla schermata di autenticazione
o allo stack di autenticazione perché non trovo un token. Quindi, se superiamo questo controllo, selezioniamo almeno alcuni dati, ma il token
potrebbe non essere valido.
Quindi avremo ovviamente il token, l'utenteId e la data di scadenza che possiamo estrarre dai dati trasformati dopo questa
riga, qui con questo
oggetto che distrugge la sintassi e
questi sono i tre pezzi di dati con i tre stessi identici nomi che conservo qui
nell'autent. file js. Quindi
qui abbiamo un oggetto con un token, userId e
campo data di scadenza, questo
è ciò che memorizziamo nella memoria asincrona, è quello che posso recuperare qui.
Ora dobbiamo verificare se il token è ancora
valido e per questo, posso ricreare la mia data di scadenza utilizzando una nuova data e passando la data di scadenza che in realtà è una stringa in formato
ISO e ora possiamo aggiungere un controllo
if e vedere se data di scadenza, quindi la data in cui il
token diventa non valido, se è inferiore o uguale alla nuova data, che è il timestamp corrente che significa che
la data di scadenza è nel passato e se è nel passato, quindi il nostro token non è valido.
Non è inoltre valido se non riusciamo a trovare un token o anche se non riusciamo
a trovare un ID utente, se una delle tre condizioni è vera, abbiamo un token non valido o un ID
utente non valido o qualcosa del genere.
Quindi in quel caso, voglio anche tornare e,
naturalmente, passare alla schermata di autenticazione. Se lo superiamo se si verifica, abbiamo
un token, abbiamo un ID utente e il token è ancora valido.
Quindi, se ce la fai qui, chiamerò oggetti di scena. navigazione. navigare nello shop per accedere alla schermata
del negozio e anche importante, devo accedere l'utente e per questo,
abbiamo bisogno di una nuova azione perché non voglio inviare una
richiesta ora, voglio solo cambiare alcuni dati in Redux. Quindi aggiungerò un nuovo creatore di azioni
qui, esporterò const autenticando forse che prende il mio userId e il mio token e che quindi viene utilizzato per modificare i miei dati in Redux e per questo, ora aggiungerò
un
nuovo identificatore di azione, eseguo l'autenticazione con una stringa di autenticare qui e utilizzarlo qui come tipo di autenticazione, allegare il mio
userId quale è il mio userId qui e il mio token che è il token che ottengo
come argomento e ora questa azione di autenticazione è ciò che voglio inviare qui nella
schermata di avvio.
Ma prima di farlo, possiamo anche tornare al creatore dell'azione e alla fine
dell'iscrizione, invece di inviare qui la mia azione di iscrizione personalizzata, possiamo anche spedire l'autenticazione ed
eseguirla
qui, questo creatore dell'azione e semplicemente inoltrare resData. localId come userId e resData. identificato come token
e fare lo stesso alla fine dell'accesso.
Quindi ora ho effettivamente combinato questi due flussi perché alla fine accade la stessa cosa,
quindi ora nel riduttore, nel riduttore di autorizzazione, ovviamente invece di controllare il login e l'iscrizione,
possiamo semplicemente importare autenticare e utilizzare questo identificatore qui, sbarazzarsi dell'iscrizione e lo commenterò per viverlo ancora qui
come riferimento perché accade la stessa cosa.
Quindi ora combinarlo ha senso perché ne abbiamo bisogno anche per questo login automatico.
Quindi qui lo spedisco anche qui per il login manuale e la registrazione manuale
e ovviamente ora con quello, se vuoi, puoi anche sbarazzarti del login e iscriverti qui, di questi
due identificatori perché non lo facciamo usali più.
Ma con ciò, tornando alla schermata di avvio, qui
ora possiamo anche spedire questo e per questo devi solo importare utilizzare l'invio da React Redux e importare l'azione, quindi importa tutto come azioni
di autenticazione forse dalla cartella del negozio, dal cartella delle azioni e dal file auth lì e poi
qui all'inizio, accedi
alla funzione di invio chiamando usa dispatch e con quello disponibile, qui possiamo aggiungere l'invio come
dipendenza ma questo non cambierà mai, quindi l'effetto non verrà mai più eseguito
e qui dopo essere passato al negozio, ora voglio anche inviare le azioni di autenticazione
per autenticare e inoltrare l'ID utente estratto, quindi questo campo qui e il token estratto, quindi questo campo che ho ottenuto dalla
mia memoria asincrona e che ora dovrebbe accedere automaticamente . È stato un sacco di lavoro,
vediamo se funziona. Se lo ricarico, finisco qui nella schermata di accesso perché
in questo momento non ho token validi memorizzati nella memoria asincrona.
Quindi ora se provo ad accedere qui, sono inoltrato, se ora ricarico, finisco di nuovo qui ed è fantastico perché
ora questo significa che questo sembra funzionare e quel token è archiviato.
Ora, ovviamente, sarebbe bello se potessimo disconnetterci anche perché in questo momento, non c'è modo
di farlo.