1
00:00:02,140 --> 00:00:08,590
Quindi, come possiamo lasciare queste schermate di autenticazione ora se siamo connessi o se abbiamo effettuato correttamente la registrazione?

2
00:00:09,520 --> 00:00:11,130
Beh, non è troppo difficile.

3
00:00:11,380 --> 00:00:16,690
Se superiamo questo dispacciamento qui senza atterrare nel blocco catch, quindi è ancora

4
00:00:16,720 --> 00:00:18,730
qui nel blocco try,

5
00:00:19,090 --> 00:00:26,560
possiamo semplicemente chiamare oggetti di scena. navigazione. naviga come abbiamo sempre fatto e

6
00:00:26,560 --> 00:00:29,470
passa alla schermata diversa che abbiamo impostato nel

7
00:00:29,470 --> 00:00:37,500
nostro navigatore di switch, quindi in questo caso alla schermata del negozio. Quindi facciamolo, andiamo semplicemente a fare acquisti e lì per ora

8
00:00:37,500 --> 00:00:42,950
non appena avremo effettuato l'accesso con successo, cosa che farò ora, questo si carica e

9
00:00:43,030 --> 00:00:45,300
siamo qui. Ora riceverò un

10
00:00:45,330 --> 00:00:49,300
avviso qui riguardo ad un aggiornamento dello stato che non può essere eseguito, questo

11
00:00:49,300 --> 00:00:55,450
set sta caricando lo stato che ora fallisce se andiamo via. La soluzione è semplicemente che non dovremmo provare ad aggiornare lo stato

12
00:00:55,450 --> 00:01:01,000
su questa schermata se non siamo più sullo schermo, quindi possiamo semplicemente spostarlo nel blocco catch perché avremo solo bisogno di

13
00:01:01,000 --> 00:01:05,560
ripristinare il caricamento in caso di errore perché è l'unico caso in cui restiamo nella schermata di autenticazione,

14
00:01:05,560 --> 00:01:07,600
altrimenti non abbiamo bisogno di cambiare lo

15
00:01:07,600 --> 00:01:12,190
stato di caricamento perché lasciamo comunque la schermata. Quindi, ci libereremo anche di

16
00:01:12,190 --> 00:01:13,780
questo, se ora

17
00:01:13,780 --> 00:01:17,080
provo di nuovo, eccoci qui e ora

18
00:01:17,300 --> 00:01:18,170
siamo

19
00:01:18,170 --> 00:01:22,730
nel nostro negozio principale. Ora ovviamente non stiamo ancora utilizzando il

20
00:01:22,730 --> 00:01:24,620
token, quindi assicuriamoci di

21
00:01:24,740 --> 00:01:31,550
farlo anche noi e per questo andiamo al riduttore di autenticazione e aggiungiamo uno stato iniziale lì che descrive

22
00:01:31,640 --> 00:01:35,850
sostanzialmente con quale stato vogliamo iniziare e quale nostro generale la forma

23
00:01:36,230 --> 00:01:41,960
dello stato è e lì voglio archiviare il token che inizialmente è nullo e voglio memorizzare

24
00:01:41,960 --> 00:01:45,980
l'ID utente che inizialmente è nullo, quindi stato iniziale molto basilare.

25
00:01:45,980 --> 00:01:51,230
Quindi possiamo esportare la funzione di riduzione che prende quello stato iniziale e che ovviamente

26
00:01:52,010 --> 00:01:57,430
riceve anche un'azione e qui voglio cambiare il tipo di azione come sempre e ho due

27
00:01:57,430 --> 00:01:59,960
casi che mi interessano in questo momento.

28
00:01:59,980 --> 00:02:08,190
Uno è l'azione di accesso, quindi è necessario importare questo identificatore dalla cartella delle azioni e il file auth

29
00:02:08,190 --> 00:02:12,530
lì e l'altro caso è l'azione di registrazione, quindi

30
00:02:12,580 --> 00:02:14,680
è necessario importare anche

31
00:02:15,820 --> 00:02:25,400
questo identificatore, in altri casi, voglio solo ritorna il mio stato. Quindi, se eseguiamo il login, voglio restituire un nuovo stato in cui

32
00:02:25,400 --> 00:02:33,400
dovrebbe essere il token, diciamo azione. token e userId dovrebbero essere azioni. userId e questo è lo stesso

33
00:02:33,940 --> 00:02:38,530
aggiornamento di cui ho bisogno per registrarmi, così possiamo semplicemente copiarlo lì.

34
00:02:39,220 --> 00:02:44,530
Ora ovviamente dobbiamo assicurarci che la nostra azione porti token e userId,

35
00:02:44,530 --> 00:02:51,970
quindi nel creatore dell'azione alla fine dell'iscrizione qui quando invio l'azione di iscrizione, dobbiamo aggiungere un campo token

36
00:02:51,970 --> 00:02:55,300
e dobbiamo aggiungere un ID utente campo.

37
00:02:55,470 --> 00:03:03,670
Ora il token può essere ottenuto dai dati di risposta, ecco quel token ID e lo stesso qui, resData non è token ID ma

38
00:03:03,670 --> 00:03:09,250
è localId e vedi che qui nel registro, localId, questo qui è l'ID utente e se

39
00:03:09,280 --> 00:03:16,530
scorri verso l'alto , Token ID, questo è il token. Quindi è quello che invio qui e possiamo

40
00:03:17,070 --> 00:03:21,140
semplicemente copiarlo e usare lo stesso, quasi lo stesso per

41
00:03:21,150 --> 00:03:28,140
il login, l'unica cosa che deve cambiare è questo identificatore e potresti anche unire il login e registrarti

42
00:03:28,140 --> 00:03:34,800
con un identificatore di autenticazione combinato, diciamo perché in un riduttore stiamo comunque facendo la stessa cosa.

43
00:03:34,920 --> 00:03:40,200
Quindi ho appena diviso qui per essere chiari che alla fine abbiamo due cose diverse ma l'aggiornamento

44
00:03:40,200 --> 00:03:44,420
è lo stesso, quindi potremmo sicuramente combinare questi due tipi di azione.

45
00:03:45,250 --> 00:03:48,970
Quindi, con questo, ora stiamo memorizzando il token ed è carino, ma

46
00:03:49,330 --> 00:03:51,990
per cosa abbiamo bisogno di questo token?

47
00:03:52,150 --> 00:03:59,700
Abbiamo bisogno di quel token che stiamo memorizzando per accedere alla nostra API e per questo, andiamo su Firebase e

48
00:03:59,700 --> 00:04:00,870
al database.

49
00:04:00,870 --> 00:04:05,940
Tieni presente che quando abbiamo impostato questo database, ho detto che dovresti iniziare in

50
00:04:05,940 --> 00:04:11,370
questa modalità di test se ricordi. Ciò che ha fatto è che ha impostato alcune regole e

51
00:04:11,370 --> 00:04:15,810
puoi controllarle se fai clic sulla scheda Regole. Questo controlla chi può leggere e scrivere nel

52
00:04:15,810 --> 00:04:20,730
tuo database e in questo momento entrambi sono impostati su true, il che significa che tutti possono leggere tutto e

53
00:04:20,820 --> 00:04:21,930
tutti possono scrivere tutto.

54
00:04:22,230 --> 00:04:32,630
Ovviamente questo non è in genere quello che vuoi, invece qui imposterò entrambi a auth diseguale su null che potrebbe sembrare strano e questo dovrebbe essere tra virgolette

55
00:04:32,630 --> 00:04:39,200
qui, ma questa è la sintassi di Firebase e puoi saperne di più sulle regole qui facendo

56
00:04:39,200 --> 00:04:44,480
clic su ulteriori informazioni o semplicemente su Google per le regole di sicurezza del

57
00:04:44,480 --> 00:04:46,960
database in tempo reale di Firebase.

58
00:04:47,000 --> 00:04:53,000
Ciò che dice Firebase è che solo gli utenti autenticati, quindi solo gli utenti che inviano la richiesta

59
00:04:53,000 --> 00:04:57,400
con un token valido dovrebbero essere in grado di leggere e scrivere.

60
00:04:57,560 --> 00:05:00,080
Ora potresti anche sostenere che Redux dovrebbe sempre essere

61
00:05:00,110 --> 00:05:06,710
consentito, potremmo impostarlo su true e potresti anche essere più specifico riguardo alle regole in modo da dire che Redux dai prodotti è

62
00:05:06,710 --> 00:05:07,970
consentito, Redux dagli

63
00:05:07,970 --> 00:05:09,770
ordini non lo è, ma ancora

64
00:05:09,800 --> 00:05:13,200
una volta è qualcosa che puoi controllare con i documenti ufficiali.

65
00:05:13,370 --> 00:05:18,950
Vado con l'installazione in cui Redux è sempre consentito ma la scrittura non lo è.

66
00:05:19,010 --> 00:05:22,160
Quindi ora per scrivere abbiamo bisogno

67
00:05:22,160 --> 00:05:28,640
di un token, altrimenti dovremo affrontare un problema. Se effettuiamo l'accesso qui e stiamo memorizzando il token ma

68
00:05:28,640 --> 00:05:30,440
non lo stiamo accodando

69
00:05:30,650 --> 00:05:33,060
alle richieste in questo momento, vedi che

70
00:05:33,320 --> 00:05:38,510
possiamo caricare tutti i dati, va bene ma noterai anche che se provo a modificarlo e

71
00:05:38,510 --> 00:05:45,420
rimuoverne un paio di punti esclamativi qui, alla fine ottengo un errore e quell'errore viene generato perché non mi è permesso

72
00:05:45,420 --> 00:05:49,190
scrivere e Firebase quindi blocca l'accesso e restituisce una risposta di errore.

73
00:05:49,190 --> 00:05:54,890
Quindi ora dobbiamo sfruttare il token che è memorizzato in un riduttore e in realtà aggiungerlo alle

74
00:05:54,890 --> 00:05:56,360
nostre richieste in uscita.

75
00:05:56,360 --> 00:06:00,940
Ora, prima di tutto, dobbiamo registrare questo riduttore nel

76
00:06:00,950 --> 00:06:08,300
nostro riduttore di radice, quindi nell'app. file js, dobbiamo importarlo, dobbiamo importare il riduttore di autenticazione dal negozio e

77
00:06:08,300 --> 00:06:14,780
lì la cartella dei riduttori e lì, il file di autenticazione e aggiungerlo ai riduttori combinati, magari essere qui con la chiave di

78
00:06:14,780 --> 00:06:20,030
autenticazione ma ovviamente puoi usare qualsiasi chiave tu voglia. Ciò ci consentirà quindi di sfruttare

79
00:06:20,240 --> 00:06:26,360
questo e accedere a questo token, ma ora dobbiamo collegarlo alle richieste in uscita, ad esempio per

80
00:06:26,360 --> 00:06:29,450
i prodotti che dobbiamo allegare alla richiesta che inviamo

81
00:06:29,510 --> 00:06:38,090
per l'aggiornamento dei prodotti, in modo che questa sia questa richiesta qui. Ora il modo in cui aggiungi una richiesta in Firebase può

82
00:06:38,090 --> 00:06:44,570
essere trovato nei documenti ufficiali di Firebase per l'autenticazione dell'utente del database in tempo reale qui, lì

83
00:06:44,570 --> 00:06:52,640
alla fine quello che hai imparato è che puoi aggiungere un token alla tua richiesta in uscita semplicemente aggiungendo quella query di

84
00:06:52,760 --> 00:06:55,540
autenticazione parametro alla fine dell'URL della richiesta.

85
00:06:55,790 --> 00:06:59,690
Quindi qui alla fine, dobbiamo aggiungere un punto interrogativo uguale e

86
00:07:00,080 --> 00:07:06,160
poi qui, dobbiamo avere il nostro token. Ora come possiamo accedere al token qui?

87
00:07:06,180 --> 00:07:12,790
Siamo nel creatore dell'azione, il che significa che non abbiamo un facile accesso al

88
00:07:13,070 --> 00:07:20,390
negozio qui, al negozio Redux o no? Redux Thunk, quel bel pacchetto che ci permette di scrivere questa sintassi con

89
00:07:20,390 --> 00:07:24,720
quella funzione che riceve la funzione di invio, che in realtà ci dà qualcosa di dolce.

90
00:07:24,800 --> 00:07:30,860
Possiamo anche cambiare un po 'questa funzione e non solo ottenere l'invio ma anche un secondo argomento,

91
00:07:30,860 --> 00:07:35,250
che è un'altra funzione che ci dà accesso allo stato Redux, quindi

92
00:07:35,510 --> 00:07:43,230
possiamo accedere allo stato corrente del nostro negozio Redux. Quindi, se consento di registrare il risultato di get state qui,

93
00:07:43,230 --> 00:07:45,300
vediamo cosa ci dà e

94
00:07:45,300 --> 00:07:51,860
per evitare errori, per il momento, qui aggiungerò solo una stringa vuota in modo da poter testare questo codice.

95
00:07:51,870 --> 00:07:56,400
Naturalmente, questo non funzionerà, ma lo ripareremo presto, quindi vediamo cosa c'è dentro quello stato se lo

96
00:07:56,400 --> 00:07:56,700
eseguiamo.

97
00:08:00,000 --> 00:08:00,540
Quindi

98
00:08:00,570 --> 00:08:03,660
è il momento di accedere di nuovo molto velocemente

99
00:08:04,550 --> 00:08:09,010
e quindi andare alla schermata di amministrazione e provare a modificarlo che ovviamente non

100
00:08:09,970 --> 00:08:13,300
riuscirà comunque, ma non importa perché ora se faccio clic qui,

101
00:08:13,420 --> 00:08:19,690
sì, non riesce ma quello che vedrai è che qui nel registro, ciò che otteniamo è un output completo del

102
00:08:19,780 --> 00:08:22,270
nostro negozio Redux completo. Questo è il nostro

103
00:08:22,270 --> 00:08:28,570
negozio Redux, otteniamo un oggetto con la nostra sezione di stato di autenticazione che ha ancora un altro oggetto con il nostro token e

104
00:08:28,570 --> 00:08:34,880
con l'ID utente, la sezione di stato della carta, la sezione di stato dei nostri ordini e la sezione di stato dei nostri prodotti.

105
00:08:34,960 --> 00:08:40,540
Quindi questo mi consente di accedere al mio negozio Redux e di accedere al token, in modo che

106
00:08:40,540 --> 00:08:48,060
il token possa essere recuperato eseguendo getState. auth. token perché questo ci dà accesso

107
00:08:48,070 --> 00:08:53,890
al nostro negozio Redux completo, questo ci dà quindi accesso alla sezione auth e questo alla

108
00:08:53,890 --> 00:08:59,810
proprietà token che stiamo gestendo in quella sezione auth. E ora nel creatore dell'azione

109
00:09:00,090 --> 00:09:09,440
dei prodotti, possiamo aggiungere questo token qui alla fine. Quindi qui possiamo semplicemente sostituire questa stringa con la variabile token che

110
00:09:09,440 --> 00:09:11,600
contiene il nostro token

111
00:09:11,600 --> 00:09:17,330
e ora se lo salviamo, con questa piccola modifica, se ora accediamo di nuovo e

112
00:09:17,390 --> 00:09:20,000
in seguito cambieremo anche questa in modo

113
00:09:20,000 --> 00:09:27,490
che non abbiamo costantemente bisogno di riconnettersi, nessuna preoccupazione. Se eseguiamo nuovamente l'accesso, andiamo all'amministratore, facciamo clic su aggiungi qui e

114
00:09:27,710 --> 00:09:33,800
ora proviamo di nuovo, questo funziona di nuovo perché ora il token viene aggiunto, Firebase lo convalida e determina che è

115
00:09:33,830 --> 00:09:35,890
valido perché ovviamente non ci siamo

116
00:09:35,900 --> 00:09:39,170
mescolati con esso , è un token valido e quindi funziona.

117
00:09:39,200 --> 00:09:43,190
Ora non abbiamo solo bisogno del token quando aggiorniamo i nostri prodotti, ma ne

118
00:09:43,190 --> 00:09:48,410
abbiamo anche bisogno quando aggiungiamo un nuovo prodotto. Quindi copierò quella logica e aggiungerò la stessa

119
00:09:48,410 --> 00:09:54,310
logica qui, quando creiamo un prodotto, ottengo il mio token con l'aiuto di quel secondo argomento che possiamo

120
00:09:54,310 --> 00:09:56,330
ottenere qui se ne abbiamo bisogno,

121
00:09:56,440 --> 00:10:03,320
la funzione get state e questo mi permette di cambia queste virgolette singole in tick posteriori in modo che io possa

122
00:10:03,320 --> 00:10:09,530
aggiungere comodamente quel parametro di query qui alla fine con un punto interrogativo uguale e uguale al mio token.

123
00:10:09,530 --> 00:10:15,300
Quindi ora possiamo creare un prodotto e aggiornare un prodotto, la cancellazione ovviamente è anche

124
00:10:15,410 --> 00:10:22,430
una richiesta di scrittura, quindi per eliminare il prodotto farò lo stesso, ottenere l'accesso al mio negozio con la funzione

125
00:10:22,430 --> 00:10:29,130
get state qui e quindi aggiungere anche un punto interrogativo di qui alla fine e aggiungi il token.

126
00:10:29,300 --> 00:10:30,290
Quindi questa è una cosa.

127
00:10:30,320 --> 00:10:36,260
Ora negli ordini, è una cosa simile, lì per il recupero, non ne abbiamo bisogno ma per l'aggiunta facciamo

128
00:10:36,290 --> 00:10:38,260
perché l'aggiunta è un'operazione di scrittura.

129
00:10:38,480 --> 00:10:45,110
Quindi, otteniamo lo stato se vogliamo, possiamo estrarre il token da lì con lo stesso approccio di prima

130
00:10:45,110 --> 00:10:52,880
e possiamo aggiungere questo qua e là, in realtà avremo bisogno anche dell'utenteId presto, quindi ci prenderemo cura a questo proposito nella

131
00:10:52,880 --> 00:10:54,860
prossima lezione, ma per ora,

132
00:10:54,860 --> 00:10:57,810
assicurati di aggiungere il token ovunque e ora

133
00:10:57,890 --> 00:11:02,570
vediamo come possiamo anche assicurarci che gli ordini appartengano davvero al nostro utente.