Quindi, come possiamo lasciare queste schermate di autenticazione ora se siamo connessi o se abbiamo effettuato correttamente la registrazione?
Beh, non è troppo difficile.
Se superiamo questo dispacciamento qui senza atterrare nel blocco catch, quindi è ancora
qui nel blocco try,
possiamo semplicemente chiamare oggetti di scena. navigazione. naviga come abbiamo sempre fatto e
passa alla schermata diversa che abbiamo impostato nel
nostro navigatore di switch, quindi in questo caso alla schermata del negozio. Quindi facciamolo, andiamo semplicemente a fare acquisti e lì per ora
non appena avremo effettuato l'accesso con successo, cosa che farò ora, questo si carica e
siamo qui. Ora riceverò un
avviso qui riguardo ad un aggiornamento dello stato che non può essere eseguito, questo
set sta caricando lo stato che ora fallisce se andiamo via. La soluzione è semplicemente che non dovremmo provare ad aggiornare lo stato
su questa schermata se non siamo più sullo schermo, quindi possiamo semplicemente spostarlo nel blocco catch perché avremo solo bisogno di
ripristinare il caricamento in caso di errore perché è l'unico caso in cui restiamo nella schermata di autenticazione,
altrimenti non abbiamo bisogno di cambiare lo
stato di caricamento perché lasciamo comunque la schermata. Quindi, ci libereremo anche di
questo, se ora
provo di nuovo, eccoci qui e ora
siamo
nel nostro negozio principale. Ora ovviamente non stiamo ancora utilizzando il
token, quindi assicuriamoci di
farlo anche noi e per questo andiamo al riduttore di autenticazione e aggiungiamo uno stato iniziale lì che descrive
sostanzialmente con quale stato vogliamo iniziare e quale nostro generale la forma
dello stato è e lì voglio archiviare il token che inizialmente è nullo e voglio memorizzare
l'ID utente che inizialmente è nullo, quindi stato iniziale molto basilare.
Quindi possiamo esportare la funzione di riduzione che prende quello stato iniziale e che ovviamente
riceve anche un'azione e qui voglio cambiare il tipo di azione come sempre e ho due
casi che mi interessano in questo momento.
Uno è l'azione di accesso, quindi è necessario importare questo identificatore dalla cartella delle azioni e il file auth
lì e l'altro caso è l'azione di registrazione, quindi
è necessario importare anche
questo identificatore, in altri casi, voglio solo ritorna il mio stato. Quindi, se eseguiamo il login, voglio restituire un nuovo stato in cui
dovrebbe essere il token, diciamo azione. token e userId dovrebbero essere azioni. userId e questo è lo stesso
aggiornamento di cui ho bisogno per registrarmi, così possiamo semplicemente copiarlo lì.
Ora ovviamente dobbiamo assicurarci che la nostra azione porti token e userId,
quindi nel creatore dell'azione alla fine dell'iscrizione qui quando invio l'azione di iscrizione, dobbiamo aggiungere un campo token
e dobbiamo aggiungere un ID utente campo.
Ora il token può essere ottenuto dai dati di risposta, ecco quel token ID e lo stesso qui, resData non è token ID ma
è localId e vedi che qui nel registro, localId, questo qui è l'ID utente e se
scorri verso l'alto , Token ID, questo è il token. Quindi è quello che invio qui e possiamo
semplicemente copiarlo e usare lo stesso, quasi lo stesso per
il login, l'unica cosa che deve cambiare è questo identificatore e potresti anche unire il login e registrarti
con un identificatore di autenticazione combinato, diciamo perché in un riduttore stiamo comunque facendo la stessa cosa.
Quindi ho appena diviso qui per essere chiari che alla fine abbiamo due cose diverse ma l'aggiornamento
è lo stesso, quindi potremmo sicuramente combinare questi due tipi di azione.
Quindi, con questo, ora stiamo memorizzando il token ed è carino, ma
per cosa abbiamo bisogno di questo token?
Abbiamo bisogno di quel token che stiamo memorizzando per accedere alla nostra API e per questo, andiamo su Firebase e
al database.
Tieni presente che quando abbiamo impostato questo database, ho detto che dovresti iniziare in
questa modalità di test se ricordi. Ciò che ha fatto è che ha impostato alcune regole e
puoi controllarle se fai clic sulla scheda Regole. Questo controlla chi può leggere e scrivere nel
tuo database e in questo momento entrambi sono impostati su true, il che significa che tutti possono leggere tutto e
tutti possono scrivere tutto.
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
qui, ma questa è la sintassi di Firebase e puoi saperne di più sulle regole qui facendo
clic su ulteriori informazioni o semplicemente su Google per le regole di sicurezza del
database in tempo reale di Firebase.
Ciò che dice Firebase è che solo gli utenti autenticati, quindi solo gli utenti che inviano la richiesta
con un token valido dovrebbero essere in grado di leggere e scrivere.
Ora potresti anche sostenere che Redux dovrebbe sempre essere
consentito, potremmo impostarlo su true e potresti anche essere più specifico riguardo alle regole in modo da dire che Redux dai prodotti è
consentito, Redux dagli
ordini non lo è, ma ancora
una volta è qualcosa che puoi controllare con i documenti ufficiali.
Vado con l'installazione in cui Redux è sempre consentito ma la scrittura non lo è.
Quindi ora per scrivere abbiamo bisogno
di un token, altrimenti dovremo affrontare un problema. Se effettuiamo l'accesso qui e stiamo memorizzando il token ma
non lo stiamo accodando
alle richieste in questo momento, vedi che
possiamo caricare tutti i dati, va bene ma noterai anche che se provo a modificarlo e
rimuoverne un paio di punti esclamativi qui, alla fine ottengo un errore e quell'errore viene generato perché non mi è permesso
scrivere e Firebase quindi blocca l'accesso e restituisce una risposta di errore.
Quindi ora dobbiamo sfruttare il token che è memorizzato in un riduttore e in realtà aggiungerlo alle
nostre richieste in uscita.
Ora, prima di tutto, dobbiamo registrare questo riduttore nel
nostro riduttore di radice, quindi nell'app. file js, dobbiamo importarlo, dobbiamo importare il riduttore di autenticazione dal negozio e
lì la cartella dei riduttori e lì, il file di autenticazione e aggiungerlo ai riduttori combinati, magari essere qui con la chiave di
autenticazione ma ovviamente puoi usare qualsiasi chiave tu voglia. Ciò ci consentirà quindi di sfruttare
questo e accedere a questo token, ma ora dobbiamo collegarlo alle richieste in uscita, ad esempio per
i prodotti che dobbiamo allegare alla richiesta che inviamo
per l'aggiornamento dei prodotti, in modo che questa sia questa richiesta qui. Ora il modo in cui aggiungi una richiesta in Firebase può
essere trovato nei documenti ufficiali di Firebase per l'autenticazione dell'utente del database in tempo reale qui, lì
alla fine quello che hai imparato è che puoi aggiungere un token alla tua richiesta in uscita semplicemente aggiungendo quella query di
autenticazione parametro alla fine dell'URL della richiesta.
Quindi qui alla fine, dobbiamo aggiungere un punto interrogativo uguale e
poi qui, dobbiamo avere il nostro token. Ora come possiamo accedere al token qui?
Siamo nel creatore dell'azione, il che significa che non abbiamo un facile accesso al
negozio qui, al negozio Redux o no? Redux Thunk, quel bel pacchetto che ci permette di scrivere questa sintassi con
quella funzione che riceve la funzione di invio, che in realtà ci dà qualcosa di dolce.
Possiamo anche cambiare un po 'questa funzione e non solo ottenere l'invio ma anche un secondo argomento,
che è un'altra funzione che ci dà accesso allo stato Redux, quindi
possiamo accedere allo stato corrente del nostro negozio Redux. Quindi, se consento di registrare il risultato di get state qui,
vediamo cosa ci dà e
per evitare errori, per il momento, qui aggiungerò solo una stringa vuota in modo da poter testare questo codice.
Naturalmente, questo non funzionerà, ma lo ripareremo presto, quindi vediamo cosa c'è dentro quello stato se lo
eseguiamo.
Quindi
è il momento di accedere di nuovo molto velocemente
e quindi andare alla schermata di amministrazione e provare a modificarlo che ovviamente non
riuscirà comunque, ma non importa perché ora se faccio clic qui,
sì, non riesce ma quello che vedrai è che qui nel registro, ciò che otteniamo è un output completo del
nostro negozio Redux completo. Questo è il nostro
negozio Redux, otteniamo un oggetto con la nostra sezione di stato di autenticazione che ha ancora un altro oggetto con il nostro token e
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.
Quindi questo mi consente di accedere al mio negozio Redux e di accedere al token, in modo che
il token possa essere recuperato eseguendo getState. auth. token perché questo ci dà accesso
al nostro negozio Redux completo, questo ci dà quindi accesso alla sezione auth e questo alla
proprietà token che stiamo gestendo in quella sezione auth. E ora nel creatore dell'azione
dei prodotti, possiamo aggiungere questo token qui alla fine. Quindi qui possiamo semplicemente sostituire questa stringa con la variabile token che
contiene il nostro token
e ora se lo salviamo, con questa piccola modifica, se ora accediamo di nuovo e
in seguito cambieremo anche questa in modo
che non abbiamo costantemente bisogno di riconnettersi, nessuna preoccupazione. Se eseguiamo nuovamente l'accesso, andiamo all'amministratore, facciamo clic su aggiungi qui e
ora proviamo di nuovo, questo funziona di nuovo perché ora il token viene aggiunto, Firebase lo convalida e determina che è
valido perché ovviamente non ci siamo
mescolati con esso , è un token valido e quindi funziona.
Ora non abbiamo solo bisogno del token quando aggiorniamo i nostri prodotti, ma ne
abbiamo anche bisogno quando aggiungiamo un nuovo prodotto. Quindi copierò quella logica e aggiungerò la stessa
logica qui, quando creiamo un prodotto, ottengo il mio token con l'aiuto di quel secondo argomento che possiamo
ottenere qui se ne abbiamo bisogno,
la funzione get state e questo mi permette di cambia queste virgolette singole in tick posteriori in modo che io possa
aggiungere comodamente quel parametro di query qui alla fine con un punto interrogativo uguale e uguale al mio token.
Quindi ora possiamo creare un prodotto e aggiornare un prodotto, la cancellazione ovviamente è anche
una richiesta di scrittura, quindi per eliminare il prodotto farò lo stesso, ottenere l'accesso al mio negozio con la funzione
get state qui e quindi aggiungere anche un punto interrogativo di qui alla fine e aggiungi il token.
Quindi questa è una cosa.
Ora negli ordini, è una cosa simile, lì per il recupero, non ne abbiamo bisogno ma per l'aggiunta facciamo
perché l'aggiunta è un'operazione di scrittura.
Quindi, otteniamo lo stato se vogliamo, possiamo estrarre il token da lì con lo stesso approccio di prima
e possiamo aggiungere questo qua e là, in realtà avremo bisogno anche dell'utenteId presto, quindi ci prenderemo cura a questo proposito nella
prossima lezione, ma per ora,
assicurati di aggiungere il token ovunque e ora
vediamo come possiamo anche assicurarci che gli ordini appartengano davvero al nostro utente.