‫Narratore: Bentornato.
‫Quindi in questo video imparerai un modo super sicuro
‫per disconnettere gli utenti.
‫Quindi fino a questo punto, quando volevamo eliminare un utente,
‫avremmo semplicemente eliminato il cookie dal nostro browser.
‫Destra?
‫Quindi qualcosa del genere
‫e poi rimuoverlo.
‫Tuttavia, il fatto è che abbiamo creato
‫questo cookie solo come cookie http.
‫Ricordatelo, e
‫ciò significa che non possiamo manipolare questo cookie
‫in alcun modo nel nostro browser.
‫Quindi non possiamo
‫cambiarlo e non possiamo nemmeno cancellarlo.
‫Quindi diamo subito un'occhiata a quel punto nel codice in cui
‫l'abbiamo fatto.
‫Quindi nel controller
‫di autenticazione lassù dove creiamo effettivamente quel cookie in
‫modo che sia proprio qui.
‫E così ancora, ricorda, che questo significa che
‫non possiamo manipolare il cookie nel browser in alcun modo.
‫Nemmeno distruggerlo.
‫Quindi eliminalo.
‫Quindi, se vogliamo continuare a utilizzare questo modo super sicuro
‫di memorizzare i cookie,
‫come potremo effettivamente disconnettere gli utenti dal nostro
‫sito Web?
‫Perché di solito con l'autenticazione JWT eliminiamo semplicemente
‫il cookie o
‫il token dalla memoria locale.
‫Ma beh, ancora una volta, non è possibile quando lo si utilizza in questo modo.
‫E quindi quello che faremo invece è creare
‫un percorso di disconnessione molto semplice che invierà semplicemente un
‫nuovo cookie con lo stesso identico nome
‫ma senza il token.
‫E quindi questo sovrascriverà il cookie corrente che
‫abbiamo nel browser con uno che ha lo stesso
‫nome ma nessun token.
‫Quindi, quando quel cookie viene inviato
‫insieme alla richiesta successiva, non saremo in grado
‫di identificare l'utente come connesso.
‫E così questo effettivamente disconnetterà l'utente.
‫E inoltre daremo a
‫questo biscotto una scadenza molto breve.
‫E quindi questo sarà effettivamente un po'
‫come eliminare
‫il cookie ma con una soluzione molto intelligente come questa, ok?
‫Quindi facciamolo qui, subito dopo l'accesso.
‫Quindi, di nuovo, quando eseguiamo l'autenticazione basata su token di solito
‫non abbiamo mai bisogno di un punto
‫finale come questo, ma quando vogliamo inviare un cookie super sicuro come facciamo bene, allora
‫dobbiamo farlo in questo modo.
‫Quindi, di nuovo, sulla risposta impostiamo il cookie e il
‫segreto è dargli esattamente lo stesso nome.
‫Quindi, proprio come ho
‫detto prima, e questo è jwt.
‫Quindi proprio come qui, ok?
‫Ma qui, inviamo quindi il
‫token, ma ora invieremo semplicemente un testo fittizio.
‫Quindi diciamo disconnesso e quindi
‫le opzioni dei cookie.
‫Quindi una data di scadenza, ad
‫esempio tra 10 secondi.
‫Quindi creiamo una nuova data
‫in
‫base alla data. ora
‫più 10 secondi.
‫Quindi sono 10 per 1000.
‫E lo imposterò, di nuovo, solo su http.
‫Impostato su true,
‫ma non è necessario impostarlo come sicuro, perché in
‫questo caso non ci sono dati sensibili di
‫cui chiunque può entrare in possesso.
‫Qui manca la virgola,
‫quindi ora tutto ciò che dobbiamo fare è inviare questa risposta.
‫Quindi lo stato 200 e contrassegniamolo
‫semplicemente come successo qui.
‫Quindi nel nostro percorso dobbiamo aggiungerlo, ovviamente, anche in modo
‫che sia sul percorso
‫dell'utente, quindi facciamolo qui dopo l'accesso,
‫ma questa sarà in realtà una richiesta di
‫ricezione perché non invieremo alcun
‫dato insieme alla
‫richiesta di non cambiare
‫nulla, in realtà otteniamo semplicemente un cookie.
‫E quindi quel nome ha davvero senso.
‫O quel verbo ha davvero senso.
‫Quindi disconnettiti, e
‫ora siamo a posto per raggiungere quella strada proprio come abbiamo
‫fatto qui con la nostra libreria Axios.
‫Quindi esporta, esci o
‫effettivamente const first e
‫quindi, proprio come
‫prima, stiamo usando un
‫blocco try catch che in
‫questo caso non è così importante perché non
‫può esserci davvero un errore durante il logout,
‫giusto?
‫Ma comunque, nel caso, ad esempio, non
‫abbiamo una connessione Internet.
‫Quindi, in tal caso, otterremo un bell'errore
‫e facciamolo prima qui.
‫Quindi mostra
‫l'errore
‫di disconnessione riprova.
‫Ok, ma questo qui, come ho detto,
‫non dovrebbe succedere così spesso.
‫Quindi, invece,
‫facciamo
‫la nostra richiesta con Axios.
‫Tutto bene.
‫E quindi il metodo questa volta
‫è ottenere e l'URL
‫è simile a quello che
‫abbiamo qui, ma
‫è disconnettersi.
‫E poi, come passaggio successivo, ricarichiamo anche la pagina.
‫Quindi è quello che facciamo
‫sempre manualmente quando eliminiamo un cookie, giusto?
‫E quindi qui, ovviamente, dobbiamo farlo in modo programmatico.
‫Destra?
‫E dobbiamo farlo qui
‫perché poiché questa è una richiesta Ajax non possiamo farlo sul
‫lato back-end.
‫Quindi non possiamo farlo con express.
‫E quindi dobbiamo, ovviamente, farlo manualmente qui.
‫Destra?
‫Altrimenti verremmo tecnicamente disconnessi, ma il nostro
‫menu utente continuerebbe a riflettere, quindi
‫mostrerebbe ancora che siamo connessi.
‫E quindi, ovviamente, dobbiamo semplicemente ricaricare la pagina che
‫invierebbe quindi il cookie non valido fondamentalmente
‫al server,
‫in modo che quello che abbiamo appena ricevuto
‫senza token e quindi non siamo
‫più connessi, e quindi il nostro menu utente sarà scomparire, ok?
‫Quindi facciamolo se c'è stato un successo.
‫Quindi, proprio come prima, riposati. dati. stato.
‫E quindi in questo punto finale, inviamo anche lo stato
‫impostato su Successo, e
‫quindi possiamo ancora una volta verificarlo qui.
‫E quindi se questo è
‫il caso, in realtà non ne abbiamo nemmeno bisogno,
‫quindi in questo caso la posizione della vedova. ricaricare.
‫E poi qualcosa di veramente
‫importante è che dobbiamo effettivamente impostarlo su true
‫qui, e questo forzerà quindi un ricaricamento dal
‫server e non dalla cache del browser, va bene?
‫Ora, ovviamente, dobbiamo contrassegnarlo qui come asincrono,
‫e va bene.
‫Quindi questa parte qui è di nuovo molto
‫importante perché altrimenti potrebbe semplicemente caricare la
‫stessa pagina
‫dalla cache che avrebbe ancora il nostro menu utente lassù.
‫Ma ovviamente non è quello
‫che vogliamo, vogliamo davvero che una nuova pagina scenda dal server.
‫Tutto ok?
‫Quindi abbiamo la nostra funzione
‫di disconnessione e ora nell'indice dobbiamo fondamentalmente attivarla una volta
‫premuto quel pulsante.
‫Quindi creiamo prima un elemento qui.
‫Quindi il documento
‫del pulsante di logout. querySelector e
‫ricorda come abbiamo creato questo elemento.
‫Quindi è qui.
‫Quindi questo.
‫Quindi stiamo selezionando ora da questa classe.
‫Va bene, e ovviamente potremmo usare anche un ID
‫qui, ma non è molto importante, ok?
‫Ciò che conta qui è dire ora
‫se c'è un
‫pulsante di disconnessione, quindi logOutButton. addEventListener.
‫Quindi vogliamo che ascolti tutti gli eventi
‫che accadono su quel pulsante ogni volta che viene fatto clic.
‫Quindi stiamo aspettando l'evento click
‫e quando ciò accade chiamiamo la funzione di
‫disconnessione che non abbiamo ancora
‫importato, quindi aggiungiamolo qui.
‫Quindi accedi e disconnettiti.
‫Va bene, e dovrebbe essere così.
‫Quindi, proviamolo ora.
‫Ricaricalo di nuovo solo per essere sicuro
‫e ora Oh,
‫riceviamo un errore durante il logout.
‫Riprova, perché è così.
‫Bene, proviamo a vedere meglio l'errore.
‫Ma l'importante è che in realtà tutto questo
‫stia già funzionando.
‫Quindi questo listener di eventi
‫qui e anche questa funzione di logout sta facendo il suo lavoro.
‫Quindi
‫facciamo solo console. errore di registro. risposta.
‫Quindi ricarichiamo questo qui.
‫Dovrebbe succedere in modo automatico.
‫Tutto bene.
‫Quindi riprova.
‫Quindi, cosa sta succedendo qui,
‫quindi il cast sull'ID oggetto non è riuscito per la disconnessione del valore.
‫Quindi è molto strano.
‫Dai un'occhiata a quel percorso.
‫Oh, certo,
‫è un grave errore.
‫Dovrebbe essere loggato ovviamente.
‫Ok, ma questo tipo di corso, di nuovo, accade sempre.
‫Quindi ricarichiamo questo qui.
‫E riprova.
‫E ora stiamo ottenendo qualcosa qui.
‫Ora è fermo ed
‫errore, ma non è affatto un problema.
‫Quindi abbiamo un errore del token Web
‫JSON perché il nostro token Web JSON non è corretto.
‫E così sta arrivando,
‫come puoi vedere, dal middleware loggato.
‫E quindi possiamo indovinare perché è così, giusto?
‫Quindi torniamo indietro e aggiungiamo il nostro controller di autenticazione.
‫E quindi il token web JSON
‫che stiamo praticamente inviando ora è questo qui, giusto?
‫Quindi questo disconnesso.
‫E quindi
‫qui in isLoggedIn che fondamentalmente attiverà un errore.
‫Quindi qui nella verifica del token web JSON, giusto?
‫E poiché l'intera funzione qui è
‫racchiusa in questo catchASync, invierà questo errore a tutto il middleware
‫di gestione degli errori globali.
‫E questo creerà quindi questo errore che in questo
‫caso non vogliamo, ricordi?
‫Quindi in
‫questo middleware isLoggedIn non vogliamo causare errori.
‫E quindi, risolviamolo effettivamente
‫e quindi rimuoveremo questo catchASync da
‫qui perché non vogliamo rilevare alcun errore Async.
‫Invece quello che vogliamo fare è fondamentalmente
‫catturarli localmente e
‫quindi se c'è un errore semplicemente dire successivo.
‫Così, ok?
‫Quindi facciamolo.
‫Quindi avvolgi tutto questo in una prova.
‫Chiudilo qui.
‫Beh, qualcos'altro che non va.
‫ah! Probabilmente ci manca solo il blocco di cattura.
‫E quindi in questo caso vogliamo passare al prossimo middleware.
‫Quindi in pratica dicendo che nessun utente ha effettuato l'accesso.
‫Destra?
‫Quindi, testiamolo di nuovo.
‫Torna indietro, oh , e ora non siamo più connessi.
‫Quindi accedi.
‫Questo ha avuto successo.
‫E ora subito disconnettiamoci.
‫ah! Bellissimo! Ora funziona correttamente.
‫E quindi questa volta quello che è successo qui
‫è che ovviamente questa verifica qui
‫non è riuscita perché quel token Web JSON non era nel
‫formato previsto da questo algoritmo.
‫Ma ciò che è successo in questo caso
‫è che l'errore non è stato rilevato
‫utilizzando la nostra funzione catchASync, ma è andato direttamente a rilevare
‫err, che è poi passato direttamente al middleware successivo.
‫Va bene, fantastico!
‫Quindi, se ora diamo un'occhiata ai nostri
‫cookie, ne abbiamo uno in uso che probabilmente è già scaduto.
‫Quindi vedi che ha solo questa durata di 10 secondi e quindi
‫se ricarico questa pagina ora, in realtà,
‫dovrebbe già essere sparito.
‫Quindi vedi zero cookie in uso.
‫Ok, e questo è tutto ciò che
‫dobbiamo fare per disconnettere l'utente dal nostro sito web.