‫Questa è la seconda parte della creazione della nostra funzionalità di accesso.
‫La prima cosa che voglio
‫fare in questo video è rendere condizionatamente questa parte della pagina.
‫Quindi ciò che significa è eseguire il rendering
‫di questi pulsanti di accesso e registrazione
‫qui nel caso in cui l'utente non abbia
‫effettuato l'accesso, e nel caso in cui l'utente abbia
‫effettivamente effettuato l'accesso, quindi eseguire il rendering di una sorta di menu utente qui
‫e anche un pulsante di disconnessione.
‫Questo tipo di rendering dovrebbe
‫ovviamente avvenire sul back-end, quindi in uno dei nostri modelli di pug.
‫Ora, come farà il nostro modello a sapere effettivamente
‫se l'utente ha effettuato l'accesso o meno?
‫In realtà, per determinare
‫che dovremo creare una nuova funzione middleware,
‫e in realtà l'unico obiettivo di questa nuova
‫funzione middleware sarà se l'utente è attualmente connesso o meno.
‫Potresti pensare che anche il nostro middleware di
‫protezione faccia qualcosa di simile, e in realtà è simile.
‫Ma la differenza è
‫che uno funziona solo per le canne protette, quindi ha senso, giusto?
‫Ma la nostra nuova funzione middleware verrà
‫eseguita per ogni singola richiesta sul nostro sito Web renderizzato.
‫Ora mettiamolo in pratica proprio qui
‫nel nostro authController, e poiché è molto simile alla
‫route di protezione o in realtà al middleware,
‫andrò avanti e copierò questo qui e poi
‫farò solo alcune modifiche.
‫Quindi copiamo e incolliamo qui e
‫questo si chiamerà isLoggedIn.
‫Questo middleware è in realtà solo per le pagine renderizzate,
‫quindi l'obiettivo qui non è proteggere alcun percorso, quindi non
‫ci sarà mai un errore in questo middleware.
‫In realtà scriviamolo rapidamente
‫qui solo per le pagine renderizzate e non ci saranno errori.
‫Il nostro token dovrebbe provenire dai cookie e
‫non da un'intestazione di
‫autorizzazione perché, ovviamente, per le
‫pagine renderizzate non avremo il token nell'intestazione.
‫Quindi, di nuovo, per l'intero sito Web renderizzato,
‫il token verrà sempre inviato solo
‫utilizzando il cookie e mai l'intestazione di autorizzazione.
‫Quello è solo per l'API.
‫E in realtà non ha bisogno di essere così complesso,
‫possiamo semplicemente dire di eseguire tutto
‫il codice che abbiamo qui se c'è un token.
‫O in realtà, se c'è un cookie chiamato fondamentalmente jwt.
‫Quindi rimuoviamo tutto questo e fondamentalmente mettiamolo qui.
‫Toglierò questo e lo metterò alla fine.
‫E poi lo riformatta.
‫Ora questo token qui non esiste, è
‫semplicemente richiedere i cookie. jwt.
‫Quindi questo qui verifica il token.
‫Quindi dobbiamo anche verificare se l'utente esiste ancora, e
‫quindi tutto da qui
‫sarà molto simile a quello che avevamo prima con
‫la grande eccezione che non creeremo nuovi errori.
‫Passeremo semplicemente al prossimo middleware, ma
‫non succederà nulla.
‫Quindi vogliamo anche verificare se
‫l'utente ha modificato di recente la password.
‫E ancora, di così, quindi nessun errore.
‫Ora, ecco alla fine cosa succederà
‫se tutto questo qui è
‫corretto, quindi se il token è verificato, se l'utente esiste ancora
‫e se non ha cambiato la password, beh,
‫in quel caso significa che c'è è un utente registrato.
‫Mettilo qui.
‫Quindi c'è un utente loggato.
‫Quello che vogliamo fare
‫in questo caso è rendere quell'utente accessibile ai nostri modelli.
‫E come possiamo farlo?
‫Beh, in realtà è qualcosa che non abbiamo mai fatto
‫prima e quindi questo è ora un bel posto per impararlo davvero.
‫Possiamo fare la risposta. locals e poi
‫metti lì qualsiasi variabile.
‫E i nostri modelli di carlino avranno quindi accesso ad essi.
‫Quindi se dico una risposta . gente del posto. user, quindi
‫all'interno di un template ci
‫sarà una variabile chiamata user.
‫Quindi, ancora una volta, ogni modello di pug
‫avrà accesso a response . locals e qualunque
‫cosa mettiamo lì sarà quindi una
‫variabile all'interno di questi modelli.
‫Quindi è un po' come passare i dati in un modello usando
‫la funzione di rendering.
‫Questo non ci serve più, perché metteremo questo
‫utente corrente in risposta. gente del posto.
‫E naturalmente, dopo di che viene chiamato il prossimo middleware.
‫E dobbiamo anche farlo al di fuori di questo If,
‫quindi nel caso in cui
‫non ci siano
‫cookie, ovviamente il prossimo middleware
‫verrà chiamato immediatamente, perché ovviamente non c'è
‫modo che ci sia effettivamente un utente connesso.
‫Quindi, di nuovo, se non ci sono cookie, non
‫c'è alcun utente registrato.
‫E così subito, e non metteremo l'utente
‫corrente in risposta. gente del posto.
‫Ma se c'è un
‫cookie, beh, allora seguiamo tutti questi passaggi di verifica
‫e alla fine se nessuno di loro
‫ha chiamato bene il prossimo middleware
‫nello stack, allora significa che c'è un utente connesso.
‫E quindi, mettiamo quell'utente in risposta . locals, e in questo modo,
‫abbiamo accesso a quell'utente nei nostri modelli
‫di pug.
‫Ad esempio, proprio qui nell'intestazione che è effettivamente
‫dove sarà la navigazione dell'utente.
‫Quindi usiamolo qui tra
‫un secondo, ma prima ovviamente abbiamo bisogno anche del
‫nuovo middleware che abbiamo appena creato.
‫E quindi veniamo qui per visualizzare il percorso
‫e, come dicevo all'inizio,
‫vogliamo che questo middleware venga applicato
‫a ogni singolo percorso che abbiamo qui.
‫Quindi lo facciamo un po' come
‫abbiamo fatto prima con il middleware di protezione.
‫Quindi fondamentalmente mettendolo qui prima di tutte le altre vie.
‫E quindi verrà inserito nello stack del
‫middleware per ogni richiesta che arriva.
‫Quindi router. use, authController. isLogin.
‫E rimuoviamo anche questa protezione dalla pagina
‫dei dettagli del tour
‫perché in realtà non ha alcun senso.
‫Quindi ora siamo effettivamente pronti per usarlo.
‫Quindi veniamo qui alla nostra intestazione e usiamo un condizionale.
‫Ora ricorda
‫come ho detto prima che i condizionali in pug non erano
‫molto potenti e così tante volte usiamo effettivamente Java Script.
‫Ma per quello che vogliamo
‫fare ora sono effettivamente abbastanza buoni.
‫Quindi tutto ciò che vogliamo fare ora è dire se user.
‫E per questo, funzionano bene per cose molto semplici semplicemente per testare
‫se una variabile esiste o meno.
‫Quindi, se c'è un utente, vogliamo mostrare questo ciò
‫che abbiamo qui, quindi mettiamolo lì.
‫Quindi lo copio
‫qui,
‫commentando questo codice e poi qui, diciamo altro.
‫Quindi, proprio come in Java Script, possiamo dire se, altrimenti.
‫Quindi qui, in realtà non voglio le
‫mie prenotazioni, ma invece voglio disconnettermi.
‫Non sono sicuro del motivo per cui è lì.
‫Quindi è disconnesso e ha anche una classe speciale che
‫ho creato per farlo sembrare speciale in CSS.
‫Quindi nav, el, e poi con il modificatore, logout e
‫rimuoviamo anche questo attributo href da lì.
‫Quindi qui, vogliamo il nome
‫dell'utente, quindi utente. nome, e in realtà vogliamo solo il nome.
‫Quindi, ad esempio, se ho creato un
‫account chiamato Jonas Schmedtmann, in questo modo, voglio visualizzare solo
‫la parte di Jonas qui.
‫Quindi dividiamo il nome usando gli spazi e
‫poi mostriamo solo il primo
‫elemento dell'array risultante.
‫Ricorda che qui possiamo semplicemente usare Java Script in questo modo.
‫Dividilo per uno spazio, quindi solo il primo elemento.
‫Quindi qui ovviamente vogliamo anche quella
‫foto, quindi questa è image /users, ricorda, almeno
‫credo.
‫Quindi, ci siamo, utenti.
‫E poi qualunque cosa provenga dal nostro database.
‫Quindi utente. foto, e poi
‫possiamo anche dargli un bel testo alternativo che
‫è molto importante per l'accessibilità.
‫Prendiamolo qui.
‫Quindi, proviamolo ora, perché
‫in realtà sono davvero curioso di vedere se funziona.
‫Quindi, proprio come prima, lasciami andare avanti
‫ed eliminare effettivamente il cookie qui.
‫Non sono sicuro di cosa stia facendo questo archivio locale qui ora.
‫Rimuoviamo anche quello, e anche questo cookie.
‫Quindi torniamo al login qui, e
‫ora dovrò riscriverlo. io test, uno, due, tre, quattro.
‫Andiamo avanti e copialo qui, accedi, e infatti
‫siamo registrati con successo.
‫Quindi, ora prendiamo il nostro biscotto, ci siamo.
‫Ma ovviamente la nostra foto e il nome dell'utente non sono
‫stati immediatamente visualizzati qui, e questo è ovvio
‫perché questo può accadere solo dopo una
‫ricarica, perché è espresso
‫chi esegue il rendering di queste
‫pagine, quindi è necessario che ci sia una ricarica.
‫Quindi implementiamolo in un secondo, ma
‫per ora vediamo se in realtà siamo connessi.
‫Quindi andiamo a tutti i tour qui, e
‫ora otteniamo questo errore qui.
‫Prova a ricaricare qui.
‫Beh, dice che non riesce a trovarlo sul server.
‫Cosa succede se ricarichiamo qui?
‫Bene, questo funziona e vedi che
‫in realtà il nostro menu utente è già qui.
‫Quindi otteniamo il nostro pulsante di
‫logout e l'immagine, e ovviamente il mio nome.
‫Grande.
‫Ora proviamo sostanzialmente
‫a disconnetterci cancellando questo cookie.
‫E nel prossimo
‫video implementeremo effettivamente questa esatta funzionalità.
‫E se ricarichiamo ora, allora è tornato, fantastico!
‫Quindi la funzione middleware che abbiamo appena creato prima
‫sta effettivamente facendo il suo lavoro.
‫Accediamo come qualcun
‫altro qui, quindi diciamo Laura, va bene.
‫Quindi Laura, e poi con la
‫stessa password prova uno due
‫tre quattro, accedi, va bene, ricarica ed ecco fatto.
‫Quindi funziona alla grande.
‫Sono solo preoccupato per questo
‫errore, quindi prima di fare qualsiasi altra
‫cosa, dobbiamo effettivamente risolverlo.
‫E poiché questo errore è iniziato solo
‫una volta che abbiamo iniziato
‫a utilizzare questo nuovo middleware, assicuriamoci solo di vedere
‫se ha qualcosa a che fare con questo.
‫Quindi, se rimuoviamo
‫questo middleware, vediamo se torna a funzionare.
‫E sì, ora lo fa.
‫Quindi è davvero un po' strano.
‫Diamo un'occhiata se
‫possiamo trovare qualche bug in questa funzione middleware.
‫Quello che vedo qui subito è
‫che torniamo sempre ogni volta che chiamiamo la prossima volta, ma qui
‫nella prossima non lo facciamo.
‫Quindi questo significa che nel caso
‫in cui inseriamo questo blocco qui verrà chiamato il prossimo
‫middleware, ma poi di
‫nuovo verrà chiamato il prossimo middleware.
‫Quindi probabilmente dobbiamo restituire anche questo qui.
‫Ma questo ci assicuriamo che il prossimo venga chiamato solo una volta.
‫Quindi proviamolo, rimettilo qui, salvalo,
‫in realtà scorri qui.
‫Sì, ora funziona.
‫Quindi ora
‫otteniamo anche il nostro utente che ha effettuato l'accesso qui,
‫e quindi ovviamente se eliminiamo il cookie praticamente disconnettendo l'utente, lo ricarichiamo
‫ora, quindi torniamo alla normalità.
‫Successivamente, ciò che volevamo risolvere qui è ricevere effettivamente un avviso
‫qui e anche quindi ricaricare
‫la pagina dopo un po' di tempo.
‫In realtà non ricaricandolo, ma rimandandolo
‫invece alla homepage.
‫Quindi in questo momento qui non c'è più e,
‫come ho detto prima, vediamo
‫quel menu utente solo quando ricarichiamo la pagina.
‫Ecco cosa faremo ora automaticamente nel
‫nostro codice Java Script qui.
‫Quindi, prima di tutto, liberiamoci di questi dati qui.
‫Registrare dati sensibili sulla console non è mai una buona
‫idea, e ora facciamo quello che
‫ho appena detto prima.
‫Quindi qui facciamo una richiesta, e ovviamente ti
‫mostrerò anche come possiamo inviare dati direttamente da un
‫modulo htl nella nostra applicazione Note.
‫Ci sono due modi.
‫Un modo è inviare
‫dati utilizzando una richiesta http come abbiamo fatto qui.
‫E un altro è semplicemente usare direttamente un modulo html.
‫E quindi anche quello è molto importante, quindi un
‫po' più avanti nella
‫sezione ti mostrerò come farlo anche quello.
‫Ad ogni modo, ora mostriamo quell'avviso e ricarichiamo la pagina.
‫Facciamolo solo nel caso in cui siamo davvero sicuri che
‫la nostra chiamata API abbia avuto successo.
‫Diciamo risposta. data, e quindi quei dati sono in
‫realtà i dati che
‫abbiamo inviato come risposta del nostro
‫giorno, e quindi da lì possiamo leggere . stato e controlla se è
‫uguale a successo.
‫Quindi, ricorda come impostiamo sempre lo
‫stato su successo, e ora possiamo effettivamente usarlo
‫per eseguire questa verifica.
‫Quindi usiamo un semplice avviso Java Script,
‫avvisi come questo e diciamo che hai effettuato l'accesso con successo.
‫Eliminiamo questo, e poi dopo un secondo e
‫mezzo carichiamo anche la prima pagina.
‫Quindi, sostanzialmente, la home page.
‫Allora, finestra. setTimeout, quindi qui
‫la funzione di callback, e quindi per
‫caricare un'altra pagina diciamo location . assegnare, e poi andiamo semplicemente alla home
‫page in questo modo.
‫E vogliamo farlo dopo 1500 millisecondi,
‫quindi un secondo e mezzo.
‫Quindi, nel caso in
‫cui non abbiamo avuto successo, in
‫realtà non vogliamo registrarlo, ma invece vogliamo avvisarlo.
‫Quindi attenzione, e ancora una volta
‫questi dati qui sono in realtà la nostra risposta ai dati.
‫Quindi da qui leggiamo la proprietà del messaggio.
‫Questo dovrebbe fare il lavoro, ricarichiamo qui.
‫Ok, non è la persona giusta.
‫Quindi, invece, amministratore di natours. io, prova
‫uno due tre quattro
‫cinque, per vedere prima l'errore.
‫E così vedi, e-mail o
‫password errate, e quindi ovviamente è perché
‫la nostra password era sbagliata, quindi liberiamocene,
‫accedi e quindi accedi con successo.
‫Ora vediamo cosa succede.
‫E in realtà non si ricarica
‫automaticamente, perché prima che ciò accada dobbiamo
‫chiudere questa finestra.
‫Quindi, una volta chiuso, dovrebbe eseguire subito la ricarica.
‫E così ci siamo.
‫Ora siamo alla home page,
‫e di nuovo con il nostro menu utente corretto reso qui, perfetto.
‫Quindi anche questa parte è stata completata e ora,
‫come ultimo passaggio, voglio migliorare questi
‫avvisi che l'utente riceve.
‫Invece di visualizzare questi avvisi Java Script incorporati.
‫Inoltre, faremo quel raggruppamento di Java Script che ho
‫già menzionato un paio di volte, ma lo
‫lasceremo tutto per il prossimo video
‫perché non voglio sovraccaricare troppo ognuno di questi.