1
00:00:02,110 --> 00:00:07,300
Quindi, per essere sicuro di essere disconnesso alla scadenza del token, aggiungerò una nuova funzione nella

2
00:00:07,300 --> 00:00:08,150
nostra azione

3
00:00:08,160 --> 00:00:13,270
auth, quindi nella cartella actions in auth. file js, aggiungerò qui una nuova funzione in

4
00:00:13,270 --> 00:00:20,950
cui voglio impostare un timer che scade sostanzialmente quando il token è scaduto. Quindi possiamo chiamare questo timer di logout impostato per esempio

5
00:00:21,220 --> 00:00:21,840
e

6
00:00:21,880 --> 00:00:31,410
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

7
00:00:31,410 --> 00:00:38,630
Javascript per impostare un timer che scade dopo questo tempo e diciamo che questo è un valore in millisecondi,

8
00:00:38,630 --> 00:00:43,280
quindi è solo un presupposto che ho e dobbiamo assicurarci di passare

9
00:00:43,280 --> 00:00:47,530
i dati in millisecondi quindi. Successivamente questa funzione verrà

10
00:00:47,540 --> 00:00:55,480
eseguita una volta scaduto il token e lì, la domanda è ora cosa facciamo lì?

11
00:00:56,060 --> 00:00:57,890
Bene, alla fine, voglio spedire il

12
00:00:57,900 --> 00:00:58,980
logout qui, giusto?

13
00:00:58,980 --> 00:01:05,490
Quindi, pertanto, il timer di logout impostato non dovrebbe essere una funzione normale, ma in realtà qui

14
00:01:06,120 --> 00:01:10,370
avrò una funzione che sfrutta Redux Thunk, quindi dove abbiamo questa

15
00:01:10,590 --> 00:01:16,680
funzione in una funzione in cui questa funzione interna viene inviata come argomento e quindi una

16
00:01:17,400 --> 00:01:20,010
volta attività asincrona terminata, una volta

17
00:01:20,010 --> 00:01:27,660
scaduto questo timer, possiamo spedire il logout, così possiamo spedire il risultato di questo creatore di azioni che è questa

18
00:01:27,660 --> 00:01:29,510
azione alla fine, in

19
00:01:29,670 --> 00:01:32,890
modo che accada quando il timer è terminato.

20
00:01:32,910 --> 00:01:38,670
Ora quando eseguiamo il logout, desidero anche cancellare tutti i timer in esecuzione perché forse abbiamo

21
00:01:38,670 --> 00:01:45,760
quel timer impostato automaticamente qui che non stiamo ancora impostando ma lo faremo presto, quindi desidero cancellare quel timer

22
00:01:45,760 --> 00:01:49,110
quando ci disconnettiamo manualmente in modo che Non ho

23
00:01:49,120 --> 00:01:55,670
quel timer in corso anche se è ridondante. Quindi possiamo aggiungere una nuova variabile forse nella

24
00:01:55,670 --> 00:02:02,340
parte superiore del file qui che chiamerò timer che non è inizialmente inizializzato e poi qui quando impostiamo

25
00:02:02,340 --> 00:02:08,760
un timer, imposterò il risultato del timeout impostato su timer o memorizzerò il risultato di quello nel

26
00:02:08,850 --> 00:02:12,860
timer che è un puntatore a questo timer e aggiunge una

27
00:02:12,860 --> 00:02:21,920
nuova funzione, forse qui, cancella il timer di logout che ora è una funzione normale, non una funzione che ottiene questa funzione interna di invio

28
00:02:21,950 --> 00:02:29,510
ma una funzione normale in cui chiamo semplicemente il timer di timeout chiaro e il timer è quella variabile che

29
00:02:29,510 --> 00:02:30,800
punta al timer.

30
00:02:30,800 --> 00:02:36,080
Voglio solo verificare se esiste il timer, se non è indefinito e se non è indefinito,

31
00:02:36,080 --> 00:02:41,620
lo chiamerò, il timeout chiaro è una funzione integrata integrata in Javascript per sbarazzarsi di quel timer.

32
00:02:41,840 --> 00:02:43,290
Quindi, con questo,

33
00:02:43,290 --> 00:02:47,770
possiamo cancellare il timer se non ne abbiamo più bisogno e voglio liberarmene

34
00:02:47,810 --> 00:02:56,540
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

35
00:02:56,540 --> 00:03:00,650
Il logout è che devo cancellare la mia memoria asincrona ovviamente.

36
00:03:00,650 --> 00:03:09,760
Quindi, qui, posso chiamare l'archiviazione asincrona rimuovere i dati utente dell'articolo, usando nuovamente lo stesso identificativo che ho usato per archiviare i

37
00:03:09,760 --> 00:03:10,470
dati.

38
00:03:10,540 --> 00:03:12,550
Quindi ho usato i dati dell'utente

39
00:03:12,550 --> 00:03:18,010
laggiù, ho bisogno di usare lo stesso identificatore per cancellarli. Ora rimuovi articolo restituisce una promessa e

40
00:03:18,010 --> 00:03:18,680
potremmo

41
00:03:18,730 --> 00:03:25,080
aspettare questo, in tal caso dovremmo restituire quella sintassi interna in cui riceviamo la spedizione

42
00:03:25,090 --> 00:03:31,600
e facciamo il nostro compito asincrono, quindi spostiamo questo codice qui in quello e quindi qui

43
00:03:31,670 --> 00:03:33,380
possiamo spedire questo azione.

44
00:03:33,380 --> 00:03:36,500
Potremmo fare tutto questo se siamo interessati

45
00:03:36,500 --> 00:03:41,970
al risultato di rimuovere l'oggetto ma qui non sono interessato, lo licenzierò e non aspetto

46
00:03:42,140 --> 00:03:48,560
il completamento di questa promessa, invece restituirò immediatamente questo nuovo oggetto azione e confido che questo sarà completo.

47
00:03:48,590 --> 00:03:51,440
Ora, ovviamente, potresti ristrutturarlo, ma è così che lo

48
00:03:51,440 --> 00:03:57,380
farò, questo dovrebbe rimuovere i dati dalla nostra memoria locale. Quindi, con questo, il logout fa questo, abbiamo

49
00:03:57,380 --> 00:04:03,450
la funzione timer logout che imposta un timer che fa il logout una volta scaduto, ora dobbiamo solo

50
00:04:03,450 --> 00:04:07,920
assicurarci di spedire questo creatore di azione del timer di logout qui, che

51
00:04:07,920 --> 00:04:15,510
usiamo questo creatore di azioni e Voglio usarlo quando eseguiamo l'autenticazione. Quindi abbiamo questa autentica azione

52
00:04:15,510 --> 00:04:22,630
qua e là alla fine, ho bisogno di inviare il timer

53
00:04:22,800 --> 00:04:30,770
di logout impostato così come questo qui. Quindi, ora userò effettivamente questa diversa sintassi in

54
00:04:30,770 --> 00:04:37,280
cui abbiamo ottenuto questa funzione interna che riceve l'invio, in modo che qui possa inviare

55
00:04:37,760 --> 00:04:42,940
il timer di logout impostato in modo che questo venga attivato e,

56
00:04:45,740 --> 00:04:51,590
naturalmente, ciò significhi anche che qui invece di restituirlo, abbiamo anche questo deve essere

57
00:04:51,590 --> 00:04:59,970
spedito, quindi spediamo qui due azioni che vanno assolutamente bene. Quindi ho impostato il mio timer e quindi invio

58
00:05:00,390 --> 00:05:02,270
l'azione di autenticazione.

59
00:05:02,290 --> 00:05:08,890
Ora, naturalmente, il timer di disconnessione deve sapere quanto tempo dovrebbe richiedere, è necessario il tempo di scadenza

60
00:05:08,890 --> 00:05:17,110
e mi aspetto di ottenere questo, questo tempo di scadenza solo per confondere i nomi, come argomento qui in autenticazione in modo

61
00:05:17,110 --> 00:05:20,920
da poterlo inoltrare qui al mio timer di disconnessione.

62
00:05:20,920 --> 00:05:27,400
Ciò significa che ogni luogo in cui inviamo l'azione di autenticazione o in cui utilizziamo questo creatore di azioni dovrei dire,

63
00:05:27,400 --> 00:05:33,100
questo in ogni luogo in cui lo facciamo non deve solo fornire l'ID utente e il token ma

64
00:05:33,280 --> 00:05:35,230
anche il tempo di scadenza e che

65
00:05:35,470 --> 00:05:38,580
inizia qui con Iscriviti. Quando ci iscriviamo,

66
00:05:38,590 --> 00:05:46,800
abbiamo la nostra data di scadenza qui e spediamo l'autenticazione. Ora l'autenticazione richiede anche il tempo di

67
00:05:46,800 --> 00:05:47,670
scadenza.

68
00:05:47,670 --> 00:05:52,440
Ora la cosa buona è che è molto facile scoprire quando scade

69
00:05:52,440 --> 00:05:58,730
perché lo abbiamo nei dati di risposta, lì abbiamo questo scade nel campo che è ovviamente

70
00:05:58,830 --> 00:06:07,970
una stringa, quindi con parseInt, possiamo convertirlo in un numero e poi questo sarà in pochi secondi, autenticare e impostare il timer di

71
00:06:07,970 --> 00:06:11,480
logout si aspettano valori in millisecondi, quindi lo

72
00:06:11,690 --> 00:06:19,540
moltiplicherò per 1000 e lo aggiungerò ovviamente anche nel login. Lì, aggiungerò anche questo come terzo argomento

73
00:06:19,580 --> 00:06:23,890
qui in modo che per il login quando

74
00:06:24,110 --> 00:06:31,490
inviamo questa azione di autenticazione, inoltriamo anche il nostro tempo di scadenza che stiamo

75
00:06:31,490 --> 00:06:36,520
tornando da Firebase. Ora abbiamo anche un altro posto in

76
00:06:36,530 --> 00:06:38,660
cui dobbiamo farlo e questa è

77
00:06:38,660 --> 00:06:45,740
la schermata di avvio perché lì spediamo anche l'autenticazione e qui dobbiamo calcolare il tempo rimanente perché questo entra in

78
00:06:45,950 --> 00:06:47,410
funzione ogni volta

79
00:06:47,420 --> 00:06:51,080
che riavviamo l'app, quindi qui non sappiamo quanto tempo impiegherà il

80
00:06:51,080 --> 00:06:53,100
token a scadere e dobbiamo calcolarlo.

81
00:06:53,150 --> 00:07:02,060
Quindi qui posso calcolare il tempo di scadenza prendendo fondamentalmente la data di scadenza che è un oggetto data e chiamando ottenere

82
00:07:02,060 --> 00:07:08,090
il tempo su di esso che mi dà il suo timestamp in millisecondi dall'inizio del

83
00:07:08,090 --> 00:07:09,070
tempo e

84
00:07:09,800 --> 00:07:14,940
da quello che devo dedurre il timestamp attuale ottenere tempo, quindi il

85
00:07:15,020 --> 00:07:18,820
timestamp corrente in millisecondi. Questo sarà in futuro, questo è

86
00:07:18,830 --> 00:07:19,850
ora quindi

87
00:07:19,850 --> 00:07:24,810
la differenza dovrebbe essere un numero positivo perché sto verificando che questo sia in futuro

88
00:07:24,830 --> 00:07:28,280
qui, quindi questo dovrebbe essere un numero positivo in millisecondi.

89
00:07:28,310 --> 00:07:35,060
Quindi ora il tempo di scadenza qui può essere inoltrato per l'autenticazione e, con ciò, dovremmo avere anche il

90
00:07:35,330 --> 00:07:36,110
logout automatico.

91
00:07:37,790 --> 00:07:39,450
Ora per

92
00:07:39,470 --> 00:07:46,440
confermare che funziona, andiamo all'autor. file js e in realtà lì, nella funzione timer di logout

93
00:07:46,560 --> 00:07:53,350
impostato, dividerò temporaneamente il tempo di scadenza per 1000, il che significa che dividerò i millisecondi per 1000 che li trasforma

94
00:07:53,370 --> 00:07:54,960
in secondi e ciò

95
00:07:54,960 --> 00:07:57,320
significa che dovremmo essere immediatamente disconnessi ora.

96
00:07:59,410 --> 00:08:06,940
Se ricarico, sono disconnesso ma noterai presto che in teoria funziona. Se eseguo nuovamente l'accesso, eseguo l'accesso e

97
00:08:06,940 --> 00:08:12,830
ora da quando ho diviso il valore per 1000, dovrei

98
00:08:12,830 --> 00:08:21,370
essere disconnesso dopo 3. 6 secondi ma non lo sono. Posso navigare, ma

99
00:08:22,390 --> 00:08:30,720
se ricarico, infatti ora sono disconnesso. Quindi ha ripulito i dati ma non ci ha riportato alla schermata di

100
00:08:30,720 --> 00:08:31,530
autenticazione e

101
00:08:31,920 --> 00:08:37,710
il motivo è che non abbiamo mai incaricato React Native di tornare alla schermata di autenticazione, quindi questo

102
00:08:37,740 --> 00:08:39,250
è il pezzo mancante.

103
00:08:39,270 --> 00:08:45,300
Cancellare il nostro negozio Redux è bello ma in risposta a tale autorizzazione, dobbiamo assicurarci

104
00:08:45,300 --> 00:08:52,090
di essere riportati alla schermata di autenticazione. Per assicurarci che ciò accada, abbiamo bisogno di un posto che sia sempre

105
00:08:52,090 --> 00:08:59,230
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

106
00:08:59,230 --> 00:09:06,480
ciò accade, possiamo tornare indietro al schermata di autenticazione. Ora quella sarebbe l'app. file js perché questo avvolge

107
00:09:06,490 --> 00:09:08,100
tutto ma il

108
00:09:08,110 --> 00:09:14,080
problema è che ho installato Redux qui. Quindi Redux nel mio negozio è disponibile solo all'interno

109
00:09:14,080 --> 00:09:19,960
di qui, quindi nei componenti figlio nidificati e questo è già il mio componente navigatore a cui non

110
00:09:19,960 --> 00:09:21,000
ho accesso diretto.

111
00:09:21,100 --> 00:09:28,700
La soluzione è semplicemente avvolgere questo con un altro componente. Lo creerò nella cartella di

112
00:09:29,090 --> 00:09:33,120
navigazione perché lo chiamerò contenitore di navigazione.

113
00:09:33,140 --> 00:09:37,690
Ora questo è un normale componente React, come questo in cui non

114
00:09:38,820 --> 00:09:46,650
ho bisogno di nulla da React Native ma dove ho appena impostato il mio componente del contenitore di navigazione in cui ricevo

115
00:09:46,650 --> 00:09:52,980
oggetti di scena e restituisco un po 'di jsx alla fine ed esportarlo come contenitore di navigazione predefinito.

116
00:09:54,380 --> 00:10:02,810
Ora lì voglio impostare la mia navigazione, quindi importerò il navigatore del negozio dal navigatore del negozio che si trova nella stessa

117
00:10:02,810 --> 00:10:06,230
cartella e sarà quello che ritorno qui, il mio

118
00:10:06,410 --> 00:10:15,110
navigatore del negozio in questo modo. Ora posso usare il mio contenitore di navigazione qui nell'app. js file, quindi invece di importare

119
00:10:15,110 --> 00:10:24,190
qui il navigatore del negozio, importare il mio contenitore di navigazione dalla cartella di navigazione e dal file del contenitore di

120
00:10:24,230 --> 00:10:29,980
navigazione e qui uso il contenitore di navigazione anziché il navigatore del negozio.

121
00:10:29,990 --> 00:10:34,670
Ora questo è semplicemente un wrapper per il navigatore del negozio, ma poiché è all'interno del provider,

122
00:10:34,670 --> 00:10:36,410
ora ho accesso a Redux lì.

123
00:10:36,440 --> 00:10:46,150
Quindi, qui, possiamo importare utilizzare il selettore da React Redux e usarlo qui per accedere a Redux.

124
00:10:46,190 --> 00:10:54,320
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

125
00:10:55,010 --> 00:11:00,410
quindi posso accedere allo stato. auth. token per ottenere l'accesso

126
00:11:00,410 --> 00:11:06,980
al token nella mia slice di stato di autenticazione e utilizzare l'operatore double bang per forzare fondamentalmente questo a essere

127
00:11:06,980 --> 00:11:12,620
vero o falso e se non abbiamo token, questo sarà falso, quindi in questo caso sarà vero

128
00:11:12,620 --> 00:11:15,460
in caso di errore un token sarà vero,

129
00:11:15,500 --> 00:11:23,780
quindi isAuth è vero se abbiamo un token che ha senso immagino. Ora possiamo usare l'effetto qui per reagire ai cambiamenti

130
00:11:23,780 --> 00:11:25,060
in questo.

131
00:11:25,160 --> 00:11:29,480
Quindi qui in uso effect, il mio array di dipendenze include isAuth, quindi

132
00:11:29,480 --> 00:11:37,270
quando isAuth cambia, questa funzione di effetto dovrebbe essere eseguita e quindi qui, posso quindi verificare se non siamo autenticati perché è quello

133
00:11:37,270 --> 00:11:39,630
che mi interessa, se isAuth non

134
00:11:39,670 --> 00:11:45,910
è vero , se è vero non mi interessa ma se non è vero, allora voglio passare alla

135
00:11:45,910 --> 00:11:49,220
schermata di autenticazione e ora abbiamo un altro problema.

136
00:11:49,390 --> 00:11:55,930
Il navigatore è qui e solo nei componenti resi con l'aiuto del navigatore abbiamo accesso

137
00:11:55,930 --> 00:12:03,220
agli oggetti di scena. navigazione. navigare, ma per fortuna, la navigazione React ci offre una via di fuga. Possiamo usare un

138
00:12:03,220 --> 00:12:08,770
ref per ottenere l'accesso alla funzionalità di navigazione con l'aiuto di

139
00:12:08,770 --> 00:12:17,550
questo componente quando lo utilizziamo nel nostro codice jsx. Possiamo creare un tale riferimento con use ref con l'uso ref di hook

140
00:12:17,610 --> 00:12:20,610
e semplicemente creiamo il nostro riferimento di navigazione qui

141
00:12:21,270 --> 00:12:27,070
chiamando use ref in questo modo e dovresti essere a conoscenza dei riferimenti in React che è

142
00:12:27,070 --> 00:12:34,890
fondamentalmente un modo per accedere direttamente a un elemento render in jsx e ora possiamo aggiungere la proprietà ref al navigatore del negozio e

143
00:12:34,910 --> 00:12:37,450
assegnarla a ref di nav o viceversa.

144
00:12:37,470 --> 00:12:43,020
Quindi questo stabilisce una connessione tra la costante di riferimento nav e questo elemento che alla fine viene reso

145
00:12:43,020 --> 00:12:49,610
qui e ora con questo qui nell'effetto, possiamo chiamare navRef. corrente, ecco come funzionano gli

146
00:12:49,630 --> 00:12:50,830
ref,

147
00:12:50,830 --> 00:12:59,660
hanno un invio di proprietà corrente. La spedizione è un metodo reso disponibile dal navigatore del negozio o da questo contenitore di app che alla

148
00:12:59,660 --> 00:13:05,420
fine è perché il contenitore del negozio non è altro che ShopNavigator. js esporta che è un componente del contenitore

149
00:13:05,420 --> 00:13:11,010
di app e questo componente ha un metodo di invio che possiamo usare per

150
00:13:11,010 --> 00:13:15,110
inviare un'azione di navigazione. Per questo, ora

151
00:13:15,110 --> 00:13:24,650
abbiamo bisogno di importare qualcosa dalla navigazione React e che qualcosa è l'oggetto delle azioni di navigazione qui e

152
00:13:24,650 --> 00:13:29,720
poi qui, che chiamiamo NavigationActions. navigare e ora

153
00:13:29,900 --> 00:13:36,620
questo ci consente di navigare. Tuttavia, non con auth come questo, ma ciò richiede un

154
00:13:36,620 --> 00:13:41,950
oggetto come argomento in cui è stato impostato il nome della route e ora può essere auth.

155
00:13:41,960 --> 00:13:47,270
Quindi è così che ora possiamo navigare all'interno di questo componente anche se è al di fuori del navigatore.

156
00:13:49,080 --> 00:13:56,610
Quindi questo va ad auth ogni volta che il nostro stato isAuth diventa non autenticato, questo significa anche che nel navigatore

157
00:13:56,610 --> 00:14:03,320
del negozio, nel nostro pulsante di logout, non abbiamo bisogno di navigare qui perché se attiviamo il logout, se

158
00:14:03,340 --> 00:14:08,670
inviamo questa azione , cancelliamo il token in Redux e quindi questo dovrebbe innescare automaticamente

159
00:14:08,670 --> 00:14:12,390
la nostra navigazione grazie a questo contenitore di navigazione

160
00:14:12,660 --> 00:14:18,140
e quindi ora se lo salviamo, dovremmo navigare in auth quando il token non è valido.

161
00:14:18,140 --> 00:14:25,530
Quindi ora se accedo di nuovo, dopo 3. 6 secondi, dovremmo essere disconnessi e dovremmo vedere

162
00:14:25,530 --> 00:14:26,800
che siamo

163
00:14:26,850 --> 00:14:28,690
disconnessi, sì, sembra buono.

164
00:14:28,890 --> 00:14:30,780
Facciamo un altro tentativo

165
00:14:36,990 --> 00:14:37,520
qui,

166
00:14:37,820 --> 00:14:45,490
sì, tornando indietro e proviamo anche a disconnetterci manualmente. Quindi, se vado al login, apro questo, faccio clic sul logout,

167
00:14:45,530 --> 00:14:47,340
anche questo funziona ancora.

168
00:14:47,410 --> 00:14:50,900
Quindi, con ciò, abbiamo incorporato la funzionalità di

169
00:14:50,950 --> 00:14:57,580
disconnessione automatica, ora torniamo al file di azione auth e rimuoviamo questa divisione fittizia qui perché l'ho

170
00:14:57,580 --> 00:15:02,020
fatto solo per i test, ovviamente non voglio ridurre manualmente il mio

171
00:15:02,020 --> 00:15:08,980
tempo di scadenza , invece ora qui abbiamo una funzionalità che funziona e che ci assicura che non

172
00:15:09,160 --> 00:15:16,210
importa se stiamo registrando o stiamo accedendo o qualunque cosa stiamo facendo, abbiamo un token che conserviamo, che possiamo

173
00:15:16,210 --> 00:15:21,660
usare e noi ci assicuriamo di essere disconnessi automaticamente anche se il token scade.

174
00:15:21,700 --> 00:15:24,010
Questa è l'applicazione finita qui.