1 00:00:01,750 --> 00:00:05,683 ‫Questa è la seconda parte della creazione della nostra funzionalità di accesso. 2 00:00:07,280 --> 00:00:09,600 ‫La prima cosa che voglio 3 00:00:09,600 --> 00:00:14,160 ‫fare in questo video è rendere condizionatamente questa parte della pagina. 4 00:00:14,160 --> 00:00:16,390 ‫Quindi ciò che significa è eseguire il rendering 5 00:00:16,390 --> 00:00:18,570 ‫di questi pulsanti di accesso e registrazione 6 00:00:18,570 --> 00:00:21,010 ‫qui nel caso in cui l'utente non abbia 7 00:00:21,010 --> 00:00:23,470 ‫effettuato l'accesso, e nel caso in cui l'utente abbia 8 00:00:23,470 --> 00:00:27,450 ‫effettivamente effettuato l'accesso, quindi eseguire il rendering di una sorta di menu utente qui 9 00:00:27,450 --> 00:00:29,543 ‫e anche un pulsante di disconnessione. 10 00:00:30,720 --> 00:00:32,650 ‫Questo tipo di rendering dovrebbe 11 00:00:32,650 --> 00:00:36,720 ‫ovviamente avvenire sul back-end, quindi in uno dei nostri modelli di pug. 12 00:00:36,720 --> 00:00:39,420 ‫Ora, come farà il nostro modello a sapere effettivamente 13 00:00:39,420 --> 00:00:41,603 ‫se l'utente ha effettuato l'accesso o meno? 14 00:00:42,510 --> 00:00:44,600 ‫In realtà, per determinare 15 00:00:44,600 --> 00:00:47,550 ‫che dovremo creare una nuova funzione middleware, 16 00:00:47,550 --> 00:00:50,970 ‫e in realtà l'unico obiettivo di questa nuova 17 00:00:50,970 --> 00:00:54,813 ‫funzione middleware sarà se l'utente è attualmente connesso o meno. 18 00:00:55,720 --> 00:00:58,790 ‫Potresti pensare che anche il nostro middleware di 19 00:00:58,790 --> 00:01:02,080 ‫protezione faccia qualcosa di simile, e in realtà è simile. 20 00:01:02,080 --> 00:01:03,590 ‫Ma la differenza è 21 00:01:03,590 --> 00:01:07,720 ‫che uno funziona solo per le canne protette, quindi ha senso, giusto? 22 00:01:07,720 --> 00:01:10,370 ‫Ma la nostra nuova funzione middleware verrà 23 00:01:10,370 --> 00:01:14,003 ‫eseguita per ogni singola richiesta sul nostro sito Web renderizzato. 24 00:01:17,060 --> 00:01:19,710 ‫Ora mettiamolo in pratica proprio qui 25 00:01:19,710 --> 00:01:23,170 ‫nel nostro authController, e poiché è molto simile alla 26 00:01:23,170 --> 00:01:26,430 ‫route di protezione o in realtà al middleware, 27 00:01:26,430 --> 00:01:29,450 ‫andrò avanti e copierò questo qui e poi 28 00:01:29,450 --> 00:01:31,483 ‫farò solo alcune modifiche. 29 00:01:34,250 --> 00:01:37,240 ‫Quindi copiamo e incolliamo qui e 30 00:01:37,240 --> 00:01:39,860 ‫questo si chiamerà isLoggedIn. 31 00:01:43,210 --> 00:01:46,900 ‫Questo middleware è in realtà solo per le pagine renderizzate, 32 00:01:46,900 --> 00:01:50,510 ‫quindi l'obiettivo qui non è proteggere alcun percorso, quindi non 33 00:01:50,510 --> 00:01:53,593 ‫ci sarà mai un errore in questo middleware. 34 00:01:55,200 --> 00:01:57,370 ‫In realtà scriviamolo rapidamente 35 00:01:58,550 --> 00:02:03,550 ‫qui solo per le pagine renderizzate e non ci saranno errori. 36 00:02:08,360 --> 00:02:11,560 ‫Il nostro token dovrebbe provenire dai cookie e 37 00:02:11,560 --> 00:02:13,640 ‫non da un'intestazione di 38 00:02:13,640 --> 00:02:16,230 ‫autorizzazione perché, ovviamente, per le 39 00:02:16,230 --> 00:02:19,133 ‫pagine renderizzate non avremo il token nell'intestazione. 40 00:02:20,050 --> 00:02:23,220 ‫Quindi, di nuovo, per l'intero sito Web renderizzato, 41 00:02:23,220 --> 00:02:25,800 ‫il token verrà sempre inviato solo 42 00:02:25,800 --> 00:02:29,000 ‫utilizzando il cookie e mai l'intestazione di autorizzazione. 43 00:02:29,000 --> 00:02:32,143 ‫Quello è solo per l'API. 44 00:02:33,070 --> 00:02:36,320 ‫E in realtà non ha bisogno di essere così complesso, 45 00:02:36,320 --> 00:02:38,790 ‫possiamo semplicemente dire di eseguire tutto 46 00:02:38,790 --> 00:02:42,030 ‫il codice che abbiamo qui se c'è un token. 47 00:02:42,030 --> 00:02:46,083 ‫O in realtà, se c'è un cookie chiamato fondamentalmente jwt. 48 00:02:49,680 --> 00:02:54,460 ‫Quindi rimuoviamo tutto questo e fondamentalmente mettiamolo qui. 49 00:02:54,460 --> 00:02:57,303 ‫Toglierò questo e lo metterò alla fine. 50 00:03:02,780 --> 00:03:04,373 ‫E poi lo riformatta. 51 00:03:08,630 --> 00:03:10,900 ‫Ora questo token qui non esiste, è 52 00:03:10,900 --> 00:03:13,907 ‫semplicemente richiedere i cookie. jwt. 53 00:03:20,000 --> 00:03:22,743 ‫Quindi questo qui verifica il token. 54 00:03:28,060 --> 00:03:31,320 ‫Quindi dobbiamo anche verificare se l'utente esiste ancora, e 55 00:03:31,320 --> 00:03:33,290 ‫quindi tutto da qui 56 00:03:33,290 --> 00:03:36,513 ‫sarà molto simile a quello che avevamo prima con 57 00:03:36,513 --> 00:03:39,533 ‫la grande eccezione che non creeremo nuovi errori. 58 00:03:41,500 --> 00:03:43,780 ‫Passeremo semplicemente al prossimo middleware, ma 59 00:03:43,780 --> 00:03:45,123 ‫non succederà nulla. 60 00:03:47,540 --> 00:03:49,530 ‫Quindi vogliamo anche verificare se 61 00:03:49,530 --> 00:03:51,910 ‫l'utente ha modificato di recente la password. 62 00:03:51,910 --> 00:03:55,113 ‫E ancora, di così, quindi nessun errore. 63 00:03:56,210 --> 00:03:58,410 ‫Ora, ecco alla fine cosa succederà 64 00:03:58,410 --> 00:04:00,420 ‫se tutto questo qui è 65 00:04:00,420 --> 00:04:03,920 ‫corretto, quindi se il token è verificato, se l'utente esiste ancora 66 00:04:03,920 --> 00:04:06,400 ‫e se non ha cambiato la password, beh, 67 00:04:06,400 --> 00:04:09,673 ‫in quel caso significa che c'è è un utente registrato. 68 00:04:11,800 --> 00:04:12,713 ‫Mettilo qui. 69 00:04:17,810 --> 00:04:20,440 ‫Quindi c'è un utente loggato. 70 00:04:20,440 --> 00:04:22,130 ‫Quello che vogliamo fare 71 00:04:22,130 --> 00:04:25,320 ‫in questo caso è rendere quell'utente accessibile ai nostri modelli. 72 00:04:25,320 --> 00:04:26,950 ‫E come possiamo farlo? 73 00:04:26,950 --> 00:04:29,960 ‫Beh, in realtà è qualcosa che non abbiamo mai fatto 74 00:04:29,960 --> 00:04:33,283 ‫prima e quindi questo è ora un bel posto per impararlo davvero. 75 00:04:34,970 --> 00:04:38,340 ‫Possiamo fare la risposta. locals e poi 76 00:04:38,340 --> 00:04:40,500 ‫metti lì qualsiasi variabile. 77 00:04:40,500 --> 00:04:43,650 ‫E i nostri modelli di carlino avranno quindi accesso ad essi. 78 00:04:43,650 --> 00:04:46,920 ‫Quindi se dico una risposta . gente del posto. user, quindi 79 00:04:46,920 --> 00:04:49,000 ‫all'interno di un template ci 80 00:04:49,000 --> 00:04:50,963 ‫sarà una variabile chiamata user. 81 00:04:52,320 --> 00:04:55,060 ‫Quindi, ancora una volta, ogni modello di pug 82 00:04:55,060 --> 00:04:59,410 ‫avrà accesso a response . locals e qualunque 83 00:04:59,410 --> 00:05:02,060 ‫cosa mettiamo lì sarà quindi una 84 00:05:02,060 --> 00:05:04,300 ‫variabile all'interno di questi modelli. 85 00:05:04,300 --> 00:05:07,350 ‫Quindi è un po' come passare i dati in un modello usando 86 00:05:07,350 --> 00:05:08,713 ‫la funzione di rendering. 87 00:05:11,870 --> 00:05:14,400 ‫Questo non ci serve più, perché metteremo questo 88 00:05:14,400 --> 00:05:17,593 ‫utente corrente in risposta. gente del posto. 89 00:05:20,710 --> 00:05:24,450 ‫E naturalmente, dopo di che viene chiamato il prossimo middleware. 90 00:05:24,450 --> 00:05:27,833 ‫E dobbiamo anche farlo al di fuori di questo If, 91 00:05:30,930 --> 00:05:32,660 ‫quindi nel caso in cui 92 00:05:32,660 --> 00:05:34,180 ‫non ci siano 93 00:05:34,180 --> 00:05:35,900 ‫cookie, ovviamente il prossimo middleware 94 00:05:35,900 --> 00:05:38,380 ‫verrà chiamato immediatamente, perché ovviamente non c'è 95 00:05:38,380 --> 00:05:41,010 ‫modo che ci sia effettivamente un utente connesso. 96 00:05:41,010 --> 00:05:44,260 ‫Quindi, di nuovo, se non ci sono cookie, non 97 00:05:44,260 --> 00:05:46,170 ‫c'è alcun utente registrato. 98 00:05:46,170 --> 00:05:49,050 ‫E così subito, e non metteremo l'utente 99 00:05:49,050 --> 00:05:52,283 ‫corrente in risposta. gente del posto. 100 00:05:53,410 --> 00:05:55,240 ‫Ma se c'è un 101 00:05:55,240 --> 00:05:58,180 ‫cookie, beh, allora seguiamo tutti questi passaggi di verifica 102 00:05:58,180 --> 00:06:00,400 ‫e alla fine se nessuno di loro 103 00:06:00,400 --> 00:06:02,530 ‫ha chiamato bene il prossimo middleware 104 00:06:02,530 --> 00:06:05,620 ‫nello stack, allora significa che c'è un utente connesso. 105 00:06:05,620 --> 00:06:09,510 ‫E quindi, mettiamo quell'utente in risposta . locals, e in questo modo, 106 00:06:09,510 --> 00:06:12,190 ‫abbiamo accesso a quell'utente nei nostri modelli 107 00:06:12,190 --> 00:06:13,573 ‫di pug. 108 00:06:15,090 --> 00:06:19,230 ‫Ad esempio, proprio qui nell'intestazione che è effettivamente 109 00:06:19,230 --> 00:06:22,493 ‫dove sarà la navigazione dell'utente. 110 00:06:23,810 --> 00:06:25,990 ‫Quindi usiamolo qui tra 111 00:06:25,990 --> 00:06:29,380 ‫un secondo, ma prima ovviamente abbiamo bisogno anche del 112 00:06:29,380 --> 00:06:31,733 ‫nuovo middleware che abbiamo appena creato. 113 00:06:32,950 --> 00:06:35,563 ‫E quindi veniamo qui per visualizzare il percorso 114 00:06:37,320 --> 00:06:39,210 ‫e, come dicevo all'inizio, 115 00:06:39,210 --> 00:06:41,240 ‫vogliamo che questo middleware venga applicato 116 00:06:41,240 --> 00:06:43,710 ‫a ogni singolo percorso che abbiamo qui. 117 00:06:43,710 --> 00:06:45,840 ‫Quindi lo facciamo un po' come 118 00:06:45,840 --> 00:06:48,210 ‫abbiamo fatto prima con il middleware di protezione. 119 00:06:48,210 --> 00:06:51,330 ‫Quindi fondamentalmente mettendolo qui prima di tutte le altre vie. 120 00:06:51,330 --> 00:06:54,020 ‫E quindi verrà inserito nello stack del 121 00:06:54,020 --> 00:06:56,403 ‫middleware per ogni richiesta che arriva. 122 00:06:57,820 --> 00:07:02,820 ‫Quindi router. use, authController. isLogin. 123 00:07:07,250 --> 00:07:10,140 ‫E rimuoviamo anche questa protezione dalla pagina 124 00:07:10,140 --> 00:07:12,180 ‫dei dettagli del tour 125 00:07:12,180 --> 00:07:14,803 ‫perché in realtà non ha alcun senso. 126 00:07:15,690 --> 00:07:18,433 ‫Quindi ora siamo effettivamente pronti per usarlo. 127 00:07:19,290 --> 00:07:23,103 ‫Quindi veniamo qui alla nostra intestazione e usiamo un condizionale. 128 00:07:24,420 --> 00:07:25,500 ‫Ora ricorda 129 00:07:25,500 --> 00:07:29,260 ‫come ho detto prima che i condizionali in pug non erano 130 00:07:29,260 --> 00:07:32,570 ‫molto potenti e così tante volte usiamo effettivamente Java Script. 131 00:07:32,570 --> 00:07:34,340 ‫Ma per quello che vogliamo 132 00:07:34,340 --> 00:07:36,270 ‫fare ora sono effettivamente abbastanza buoni. 133 00:07:36,270 --> 00:07:40,793 ‫Quindi tutto ciò che vogliamo fare ora è dire se user. 134 00:07:42,020 --> 00:07:46,980 ‫E per questo, funzionano bene per cose molto semplici semplicemente per testare 135 00:07:46,980 --> 00:07:50,063 ‫se una variabile esiste o meno. 136 00:07:52,273 --> 00:07:56,380 ‫Quindi, se c'è un utente, vogliamo mostrare questo ciò 137 00:07:56,380 --> 00:07:59,853 ‫che abbiamo qui, quindi mettiamolo lì. 138 00:08:00,940 --> 00:08:02,433 ‫Quindi lo copio 139 00:08:05,000 --> 00:08:06,410 ‫qui, 140 00:08:09,150 --> 00:08:13,560 ‫commentando questo codice e poi qui, diciamo altro. 141 00:08:13,560 --> 00:08:17,670 ‫Quindi, proprio come in Java Script, possiamo dire se, altrimenti. 142 00:08:17,670 --> 00:08:20,300 ‫Quindi qui, in realtà non voglio le 143 00:08:20,300 --> 00:08:22,580 ‫mie prenotazioni, ma invece voglio disconnettermi. 144 00:08:22,580 --> 00:08:24,173 ‫Non sono sicuro del motivo per cui è lì. 145 00:08:25,490 --> 00:08:29,000 ‫Quindi è disconnesso e ha anche una classe speciale che 146 00:08:29,980 --> 00:08:33,313 ‫ho creato per farlo sembrare speciale in CSS. 147 00:08:34,180 --> 00:08:39,180 ‫Quindi nav, el, e poi con il modificatore, logout e 148 00:08:40,860 --> 00:08:44,713 ‫rimuoviamo anche questo attributo href da lì. 149 00:08:47,270 --> 00:08:49,743 ‫Quindi qui, vogliamo il nome 150 00:08:53,010 --> 00:08:57,040 ‫dell'utente, quindi utente. nome, e in realtà vogliamo solo il nome. 151 00:08:57,040 --> 00:08:59,990 ‫Quindi, ad esempio, se ho creato un 152 00:08:59,990 --> 00:09:04,650 ‫account chiamato Jonas Schmedtmann, in questo modo, voglio visualizzare solo 153 00:09:04,650 --> 00:09:07,293 ‫la parte di Jonas qui. 154 00:09:08,530 --> 00:09:11,810 ‫Quindi dividiamo il nome usando gli spazi e 155 00:09:11,810 --> 00:09:14,030 ‫poi mostriamo solo il primo 156 00:09:14,030 --> 00:09:15,623 ‫elemento dell'array risultante. 157 00:09:18,330 --> 00:09:21,280 ‫Ricorda che qui possiamo semplicemente usare Java Script in questo modo. 158 00:09:22,610 --> 00:09:26,513 ‫Dividilo per uno spazio, quindi solo il primo elemento. 159 00:09:28,330 --> 00:09:31,593 ‫Quindi qui ovviamente vogliamo anche quella 160 00:09:33,430 --> 00:09:37,300 ‫foto, quindi questa è image /users, ricorda, almeno 161 00:09:37,300 --> 00:09:38,313 ‫credo. 162 00:09:41,930 --> 00:09:43,377 ‫Quindi, ci siamo, utenti. 163 00:09:46,660 --> 00:09:49,683 ‫E poi qualunque cosa provenga dal nostro database. 164 00:09:53,220 --> 00:09:56,747 ‫Quindi utente. foto, e poi 165 00:09:56,747 --> 00:10:00,880 ‫possiamo anche dargli un bel testo alternativo che 166 00:10:00,880 --> 00:10:03,737 ‫è molto importante per l'accessibilità. 167 00:10:03,737 --> 00:10:05,723 ‫Prendiamolo qui. 168 00:10:12,070 --> 00:10:14,040 ‫Quindi, proviamolo ora, perché 169 00:10:14,040 --> 00:10:18,113 ‫in realtà sono davvero curioso di vedere se funziona. 170 00:10:19,780 --> 00:10:22,180 ‫Quindi, proprio come prima, lasciami andare avanti 171 00:10:22,180 --> 00:10:24,393 ‫ed eliminare effettivamente il cookie qui. 172 00:10:25,610 --> 00:10:28,900 ‫Non sono sicuro di cosa stia facendo questo archivio locale qui ora. 173 00:10:28,900 --> 00:10:33,163 ‫Rimuoviamo anche quello, e anche questo cookie. 174 00:10:35,030 --> 00:10:38,460 ‫Quindi torniamo al login qui, e 175 00:10:38,460 --> 00:10:40,903 ‫ora dovrò riscriverlo. io test, uno, due, tre, quattro. 176 00:10:44,217 --> 00:10:48,260 ‫Andiamo avanti e copialo qui, accedi, e infatti 177 00:10:48,260 --> 00:10:50,940 ‫siamo registrati con successo. 178 00:10:50,940 --> 00:10:55,420 ‫Quindi, ora prendiamo il nostro biscotto, ci siamo. 179 00:10:55,420 --> 00:10:59,040 ‫Ma ovviamente la nostra foto e il nome dell'utente non sono 180 00:10:59,040 --> 00:11:01,820 ‫stati immediatamente visualizzati qui, e questo è ovvio 181 00:11:01,820 --> 00:11:04,470 ‫perché questo può accadere solo dopo una 182 00:11:04,470 --> 00:11:06,210 ‫ricarica, perché è espresso 183 00:11:06,210 --> 00:11:08,450 ‫chi esegue il rendering di queste 184 00:11:08,450 --> 00:11:11,470 ‫pagine, quindi è necessario che ci sia una ricarica. 185 00:11:11,470 --> 00:11:13,443 ‫Quindi implementiamolo in un secondo, ma 186 00:11:15,120 --> 00:11:17,460 ‫per ora vediamo se in realtà siamo connessi. 187 00:11:17,460 --> 00:11:22,160 ‫Quindi andiamo a tutti i tour qui, e 188 00:11:22,160 --> 00:11:25,400 ‫ora otteniamo questo errore qui. 189 00:11:25,400 --> 00:11:28,180 ‫Prova a ricaricare qui. 190 00:11:28,180 --> 00:11:29,373 ‫Beh, dice che non riesce a trovarlo sul server. 191 00:11:30,490 --> 00:11:33,630 ‫Cosa succede se ricarichiamo qui? 192 00:11:33,630 --> 00:11:35,633 ‫Bene, questo funziona e vedi che 193 00:11:37,400 --> 00:11:39,936 ‫in realtà il nostro menu utente è già qui. 194 00:11:39,936 --> 00:11:42,910 ‫Quindi otteniamo il nostro pulsante di 195 00:11:42,910 --> 00:11:46,220 ‫logout e l'immagine, e ovviamente il mio nome. 196 00:11:46,220 --> 00:11:48,490 ‫Grande. 197 00:11:48,490 --> 00:11:49,870 ‫Ora proviamo sostanzialmente 198 00:11:49,870 --> 00:11:51,890 ‫a disconnetterci cancellando questo cookie. 199 00:11:51,890 --> 00:11:53,670 ‫E nel prossimo 200 00:11:53,670 --> 00:11:55,900 ‫video implementeremo effettivamente questa esatta funzionalità. 201 00:11:55,900 --> 00:11:57,433 ‫E se ricarichiamo ora, allora è tornato, fantastico! 202 00:11:59,530 --> 00:12:03,160 ‫Quindi la funzione middleware che abbiamo appena creato prima 203 00:12:03,160 --> 00:12:05,840 ‫sta effettivamente facendo il suo lavoro. 204 00:12:05,840 --> 00:12:07,663 ‫Accediamo come qualcun 205 00:12:08,500 --> 00:12:12,440 ‫altro qui, quindi diciamo Laura, va bene. 206 00:12:12,440 --> 00:12:15,713 ‫Quindi Laura, e poi con la 207 00:12:17,870 --> 00:12:20,930 ‫stessa password prova uno due 208 00:12:20,930 --> 00:12:25,190 ‫tre quattro, accedi, va bene, ricarica ed ecco fatto. 209 00:12:25,190 --> 00:12:29,690 ‫Quindi funziona alla grande. 210 00:12:29,690 --> 00:12:31,680 ‫Sono solo preoccupato per questo 211 00:12:31,680 --> 00:12:33,900 ‫errore, quindi prima di fare qualsiasi altra 212 00:12:33,900 --> 00:12:35,580 ‫cosa, dobbiamo effettivamente risolverlo. 213 00:12:35,580 --> 00:12:37,890 ‫E poiché questo errore è iniziato solo 214 00:12:37,890 --> 00:12:40,000 ‫una volta che abbiamo iniziato 215 00:12:40,000 --> 00:12:43,060 ‫a utilizzare questo nuovo middleware, assicuriamoci solo di vedere 216 00:12:43,060 --> 00:12:45,520 ‫se ha qualcosa a che fare con questo. 217 00:12:45,520 --> 00:12:47,020 ‫Quindi, se rimuoviamo 218 00:12:48,110 --> 00:12:50,530 ‫questo middleware, vediamo se torna a funzionare. 219 00:12:50,530 --> 00:12:52,853 ‫E sì, ora lo fa. 220 00:12:54,860 --> 00:12:56,570 ‫Quindi è davvero un po' strano. 221 00:12:56,570 --> 00:12:58,253 ‫Diamo un'occhiata se 222 00:12:59,218 --> 00:13:02,790 ‫possiamo trovare qualche bug in questa funzione middleware. 223 00:13:02,790 --> 00:13:05,023 ‫Quello che vedo qui subito è 224 00:13:09,560 --> 00:13:13,890 ‫che torniamo sempre ogni volta che chiamiamo la prossima volta, ma qui 225 00:13:13,890 --> 00:13:15,760 ‫nella prossima non lo facciamo. 226 00:13:15,760 --> 00:13:18,360 ‫Quindi questo significa che nel caso 227 00:13:18,360 --> 00:13:22,540 ‫in cui inseriamo questo blocco qui verrà chiamato il prossimo 228 00:13:22,540 --> 00:13:24,490 ‫middleware, ma poi di 229 00:13:24,490 --> 00:13:27,060 ‫nuovo verrà chiamato il prossimo middleware. 230 00:13:27,060 --> 00:13:28,633 ‫Quindi probabilmente dobbiamo restituire anche questo qui. 231 00:13:30,630 --> 00:13:34,823 ‫Ma questo ci assicuriamo che il prossimo venga chiamato solo una volta. 232 00:13:36,040 --> 00:13:40,223 ‫Quindi proviamolo, rimettilo qui, salvalo, 233 00:13:41,670 --> 00:13:45,430 ‫in realtà scorri qui. 234 00:13:45,430 --> 00:13:48,713 ‫Sì, ora funziona. 235 00:13:53,460 --> 00:13:54,510 ‫Quindi ora 236 00:13:55,840 --> 00:13:59,490 ‫otteniamo anche il nostro utente che ha effettuato l'accesso qui, 237 00:13:59,490 --> 00:14:03,610 ‫e quindi ovviamente se eliminiamo il cookie praticamente disconnettendo l'utente, lo ricarichiamo 238 00:14:03,610 --> 00:14:05,330 ‫ora, quindi torniamo alla normalità. 239 00:14:05,330 --> 00:14:09,283 ‫Successivamente, ciò che volevamo risolvere qui è ricevere effettivamente un avviso 240 00:14:12,366 --> 00:14:14,430 ‫qui e anche quindi ricaricare 241 00:14:14,430 --> 00:14:16,930 ‫la pagina dopo un po' di tempo. 242 00:14:16,930 --> 00:14:20,133 ‫In realtà non ricaricandolo, ma rimandandolo 243 00:14:21,620 --> 00:14:23,400 ‫invece alla homepage. 244 00:14:23,400 --> 00:14:26,343 ‫Quindi in questo momento qui non c'è più e, 245 00:14:28,570 --> 00:14:30,410 ‫come ho detto prima, vediamo 246 00:14:30,410 --> 00:14:33,330 ‫quel menu utente solo quando ricarichiamo la pagina. 247 00:14:33,330 --> 00:14:36,230 ‫Ecco cosa faremo ora automaticamente nel 248 00:14:36,230 --> 00:14:38,800 ‫nostro codice Java Script qui. 249 00:14:38,800 --> 00:14:40,293 ‫Quindi, prima di tutto, liberiamoci di questi dati qui. 250 00:14:41,882 --> 00:14:45,280 ‫Registrare dati sensibili sulla console non è mai una buona 251 00:14:46,350 --> 00:14:48,340 ‫idea, e ora facciamo quello che 252 00:14:48,340 --> 00:14:50,140 ‫ho appena detto prima. 253 00:14:50,140 --> 00:14:53,403 ‫Quindi qui facciamo una richiesta, e ovviamente ti 254 00:14:54,250 --> 00:14:58,220 ‫mostrerò anche come possiamo inviare dati direttamente da un 255 00:14:58,220 --> 00:15:01,220 ‫modulo htl nella nostra applicazione Note. 256 00:15:01,220 --> 00:15:04,503 ‫Ci sono due modi. 257 00:15:06,430 --> 00:15:07,410 ‫Un modo è inviare 258 00:15:07,410 --> 00:15:09,260 ‫dati utilizzando una richiesta http come abbiamo fatto qui. 259 00:15:09,260 --> 00:15:11,750 ‫E un altro è semplicemente usare direttamente un modulo html. 260 00:15:11,750 --> 00:15:15,940 ‫E quindi anche quello è molto importante, quindi un 261 00:15:15,940 --> 00:15:17,960 ‫po' più avanti nella 262 00:15:17,960 --> 00:15:21,130 ‫sezione ti mostrerò come farlo anche quello. 263 00:15:21,130 --> 00:15:23,090 ‫Ad ogni modo, ora mostriamo quell'avviso e ricarichiamo la pagina. 264 00:15:23,090 --> 00:15:27,200 ‫Facciamolo solo nel caso in cui siamo davvero sicuri che 265 00:15:27,200 --> 00:15:30,320 ‫la nostra chiamata API abbia avuto successo. 266 00:15:30,320 --> 00:15:32,870 ‫Diciamo risposta. data, e quindi quei dati sono in 267 00:15:32,870 --> 00:15:36,290 ‫realtà i dati che 268 00:15:36,290 --> 00:15:38,600 ‫abbiamo inviato come risposta del nostro 269 00:15:38,600 --> 00:15:41,220 ‫giorno, e quindi da lì possiamo leggere . stato e controlla se è 270 00:15:41,220 --> 00:15:44,693 ‫uguale a successo. 271 00:15:44,693 --> 00:15:47,483 ‫Quindi, ricorda come impostiamo sempre lo 272 00:15:50,439 --> 00:15:53,920 ‫stato su successo, e ora possiamo effettivamente usarlo 273 00:15:53,920 --> 00:15:55,900 ‫per eseguire questa verifica. 274 00:15:55,900 --> 00:15:58,093 ‫Quindi usiamo un semplice avviso Java Script, 275 00:15:59,038 --> 00:16:02,147 ‫avvisi come questo e diciamo che hai effettuato l'accesso con successo. 276 00:16:02,147 --> 00:16:07,147 ‫Eliminiamo questo, e poi dopo un secondo e 277 00:16:14,120 --> 00:16:17,950 ‫mezzo carichiamo anche la prima pagina. 278 00:16:17,950 --> 00:16:21,330 ‫Quindi, sostanzialmente, la home page. 279 00:16:21,330 --> 00:16:22,730 ‫Allora, finestra. setTimeout, quindi qui 280 00:16:23,640 --> 00:16:28,640 ‫la funzione di callback, e quindi per 281 00:16:31,100 --> 00:16:33,400 ‫caricare un'altra pagina diciamo location . assegnare, e poi andiamo semplicemente alla home 282 00:16:33,400 --> 00:16:36,633 ‫page in questo modo. 283 00:16:37,700 --> 00:16:41,563 ‫E vogliamo farlo dopo 1500 millisecondi, 284 00:16:43,690 --> 00:16:47,120 ‫quindi un secondo e mezzo. 285 00:16:47,120 --> 00:16:49,023 ‫Quindi, nel caso in 286 00:16:49,990 --> 00:16:52,780 ‫cui non abbiamo avuto successo, in 287 00:16:52,780 --> 00:16:55,950 ‫realtà non vogliamo registrarlo, ma invece vogliamo avvisarlo. 288 00:16:55,950 --> 00:16:57,553 ‫Quindi attenzione, e ancora una volta 289 00:16:59,600 --> 00:17:02,350 ‫questi dati qui sono in realtà la nostra risposta ai dati. 290 00:17:02,350 --> 00:17:04,533 ‫Quindi da qui leggiamo la proprietà del messaggio. 291 00:17:05,793 --> 00:17:08,403 ‫Questo dovrebbe fare il lavoro, ricarichiamo qui. 292 00:17:14,680 --> 00:17:17,313 ‫Ok, non è la persona giusta. 293 00:17:19,930 --> 00:17:21,853 ‫Quindi, invece, amministratore di natours. io, prova 294 00:17:22,830 --> 00:17:27,413 ‫uno due tre quattro 295 00:17:29,230 --> 00:17:31,770 ‫cinque, per vedere prima l'errore. 296 00:17:31,770 --> 00:17:34,270 ‫E così vedi, e-mail o 297 00:17:34,270 --> 00:17:37,490 ‫password errate, e quindi ovviamente è perché 298 00:17:37,490 --> 00:17:40,783 ‫la nostra password era sbagliata, quindi liberiamocene, 299 00:17:41,960 --> 00:17:44,750 ‫accedi e quindi accedi con successo. 300 00:17:44,750 --> 00:17:46,630 ‫Ora vediamo cosa succede. 301 00:17:46,630 --> 00:17:48,710 ‫E in realtà non si ricarica 302 00:17:48,710 --> 00:17:51,310 ‫automaticamente, perché prima che ciò accada dobbiamo 303 00:17:51,310 --> 00:17:52,970 ‫chiudere questa finestra. 304 00:17:52,970 --> 00:17:54,700 ‫Quindi, una volta chiuso, dovrebbe eseguire subito la ricarica. 305 00:17:54,700 --> 00:17:57,963 ‫E così ci siamo. 306 00:18:00,690 --> 00:18:01,973 ‫Ora siamo alla home page, 307 00:18:02,950 --> 00:18:05,810 ‫e di nuovo con il nostro menu utente corretto reso qui, perfetto. 308 00:18:05,810 --> 00:18:10,213 ‫Quindi anche questa parte è stata completata e ora, 309 00:18:11,990 --> 00:18:14,530 ‫come ultimo passaggio, voglio migliorare questi 310 00:18:14,530 --> 00:18:17,020 ‫avvisi che l'utente riceve. 311 00:18:17,020 --> 00:18:19,060 ‫Invece di visualizzare questi avvisi Java Script incorporati. 312 00:18:19,060 --> 00:18:22,333 ‫Inoltre, faremo quel raggruppamento di Java Script che ho 313 00:18:23,230 --> 00:18:26,050 ‫già menzionato un paio di volte, ma lo 314 00:18:26,050 --> 00:18:28,490 ‫lasceremo tutto per il prossimo video 315 00:18:28,490 --> 00:18:31,320 ‫perché non voglio sovraccaricare troppo ognuno di questi.