1 00:00:01,750 --> 00:00:05,683 ‫Esta é a segunda parte da construção de nossa funcionalidade de login. 2 00:00:07,280 --> 00:00:09,600 ‫A primeira coisa que quero 3 00:00:09,600 --> 00:00:14,160 ‫fazer neste vídeo é renderizar condicionalmente essa parte da página. 4 00:00:14,160 --> 00:00:16,390 ‫Então o que significa é renderizar 5 00:00:16,390 --> 00:00:18,570 ‫esses botões de login e inscrição 6 00:00:18,570 --> 00:00:21,010 ‫aqui, caso o usuário não esteja logado, 7 00:00:21,010 --> 00:00:23,470 ‫e caso o usuário de fato esteja 8 00:00:23,470 --> 00:00:27,450 ‫bem logado, renderizar algum tipo de menu de usuário aqui e 9 00:00:27,450 --> 00:00:29,543 ‫também um botão de logout. 10 00:00:30,720 --> 00:00:32,650 ‫Esse tipo de renderização deve 11 00:00:32,650 --> 00:00:36,720 ‫acontecer no back-end, portanto, em um de nossos modelos de pug. 12 00:00:36,720 --> 00:00:39,420 ‫Agora, como o modelo de saída realmente saberá se 13 00:00:39,420 --> 00:00:41,603 ‫o usuário está logado ou não? 14 00:00:42,510 --> 00:00:44,600 ‫Na verdade, para determinar isso, 15 00:00:44,600 --> 00:00:47,550 ‫teremos que criar uma nova função de middleware, 16 00:00:47,550 --> 00:00:50,970 ‫e realmente o único objetivo dessa nova função de 17 00:00:50,970 --> 00:00:54,813 ‫middleware será se o usuário está atualmente logado ou não. 18 00:00:55,720 --> 00:00:58,790 ‫Você pode pensar que nosso middleware de proteção 19 00:00:58,790 --> 00:01:02,080 ‫também faz algo semelhante e, na verdade, é semelhante. 20 00:01:02,080 --> 00:01:03,590 ‫Mas a diferença 21 00:01:03,590 --> 00:01:07,720 ‫é que só funciona para hastes protegidas, então faz sentido, certo? 22 00:01:07,720 --> 00:01:10,370 ‫Mas nossa nova função de middleware 23 00:01:10,370 --> 00:01:14,003 ‫estará em execução para cada solicitação em nosso site renderizado. 24 00:01:17,060 --> 00:01:19,710 ‫Vamos agora colocar isso em prática 25 00:01:19,710 --> 00:01:23,170 ‫aqui em nosso authController, e como é muito 26 00:01:23,170 --> 00:01:26,430 ‫semelhante à rota de proteção ou ao middleware, 27 00:01:26,430 --> 00:01:29,450 ‫irei copiar este aqui e depois apenas 28 00:01:29,450 --> 00:01:31,483 ‫fazer algumas modificações. 29 00:01:34,250 --> 00:01:37,240 ‫Então, vamos copiá-lo e colá-lo aqui 30 00:01:37,240 --> 00:01:39,860 ‫e este se chamará isLoggedIn. 31 00:01:43,210 --> 00:01:46,900 ‫Este middleware é realmente apenas para páginas renderizadas, então 32 00:01:46,900 --> 00:01:50,510 ‫o objetivo aqui não é proteger nenhuma rota, então 33 00:01:50,510 --> 00:01:53,593 ‫nunca haverá um erro neste middleware. 34 00:01:55,200 --> 00:01:57,370 ‫Na verdade, vamos escrever 35 00:01:58,550 --> 00:02:03,550 ‫isso rapidamente aqui apenas para páginas renderizadas, e não haverá erros. 36 00:02:08,360 --> 00:02:11,560 ‫Nosso token deve vir dos cookies e não 37 00:02:11,560 --> 00:02:13,640 ‫de um cabeçalho de 38 00:02:13,640 --> 00:02:16,230 ‫autorização porque, é claro, para páginas 39 00:02:16,230 --> 00:02:19,133 ‫processadas, não teremos o token no cabeçalho. 40 00:02:20,050 --> 00:02:23,220 ‫Então, novamente, para todo o nosso site renderizado, 41 00:02:23,220 --> 00:02:25,800 ‫o token sempre será enviado apenas 42 00:02:25,800 --> 00:02:29,000 ‫usando o cookie e nunca o cabeçalho de autorização. 43 00:02:29,000 --> 00:02:32,143 ‫Esse é apenas para a api. 44 00:02:33,070 --> 00:02:36,320 ‫E, na verdade, não precisa ser tão complexo quanto isso, 45 00:02:36,320 --> 00:02:38,790 ‫podemos simplesmente dizer para executar todo 46 00:02:38,790 --> 00:02:42,030 ‫o código que temos aqui se houver um token. 47 00:02:42,030 --> 00:02:46,083 ‫Ou, na verdade, se houver um cookie chamado jwt basicamente. 48 00:02:49,680 --> 00:02:54,460 ‫Então, vamos remover tudo isso e basicamente colocá-lo aqui. 49 00:02:54,460 --> 00:02:57,303 ‫Vou remover este e colocá-lo no final. 50 00:03:02,780 --> 00:03:04,373 ‫E então isso o formata novamente. 51 00:03:08,630 --> 00:03:10,900 ‫Agora, este token aqui não existe, é 52 00:03:10,900 --> 00:03:13,907 ‫simplesmente solicitar cookies. jwt. 53 00:03:20,000 --> 00:03:22,743 ‫Portanto, isso aqui verifica o token. 54 00:03:28,060 --> 00:03:31,320 ‫Em seguida, também precisamos verificar se o usuário ainda existe 55 00:03:31,320 --> 00:03:33,290 ‫e, portanto, tudo a partir 56 00:03:33,290 --> 00:03:36,513 ‫daqui será muito semelhante ao que tínhamos antes, com a 57 00:03:36,513 --> 00:03:39,533 ‫grande exceção de que não criaremos novos erros. 58 00:03:41,500 --> 00:03:43,780 ‫Vamos simplesmente passar para o próximo middleware, 59 00:03:43,780 --> 00:03:45,123 ‫mas nada acontecerá. 60 00:03:47,540 --> 00:03:49,530 ‫Em seguida, também queremos verificar 61 00:03:49,530 --> 00:03:51,910 ‫se o usuário alterou recentemente sua senha. 62 00:03:51,910 --> 00:03:55,113 ‫E de novo, claro, então nenhum erro. 63 00:03:56,210 --> 00:03:58,410 ‫Agora, aqui no final o que vai 64 00:03:58,410 --> 00:04:00,420 ‫acontecer se tudo isso aqui 65 00:04:00,420 --> 00:04:03,920 ‫estiver correto, então se o token for verificado, se o usuário 66 00:04:03,920 --> 00:04:06,400 ‫ainda existe, e se ele não mudou sua 67 00:04:06,400 --> 00:04:09,673 ‫senha, bem, nesse caso significa que lá é um usuário conectado. 68 00:04:11,800 --> 00:04:12,713 ‫Coloque isso aqui. 69 00:04:17,810 --> 00:04:20,440 ‫Portanto, há um usuário conectado. 70 00:04:20,440 --> 00:04:22,130 ‫O que queremos fazer 71 00:04:22,130 --> 00:04:25,320 ‫neste caso é tornar esse usuário acessível aos nossos modelos. 72 00:04:25,320 --> 00:04:26,950 ‫E como podemos fazer isso? 73 00:04:26,950 --> 00:04:29,960 ‫Bem, na verdade isso é algo que não fazíamos 74 00:04:29,960 --> 00:04:33,283 ‫antes e agora este é um bom lugar para aprender isso. 75 00:04:34,970 --> 00:04:38,340 ‫Podemos responder. locais e, em 76 00:04:38,340 --> 00:04:40,500 ‫seguida, coloque qualquer variável lá. 77 00:04:40,500 --> 00:04:43,650 ‫E nossos modelos de pug terão acesso a eles. 78 00:04:43,650 --> 00:04:46,920 ‫Então, se eu disser uma resposta. habitantes locais. usuário, então 79 00:04:46,920 --> 00:04:49,000 ‫dentro de um modelo haverá 80 00:04:49,000 --> 00:04:50,963 ‫uma variável chamada usuário. 81 00:04:52,320 --> 00:04:55,060 ‫Então, novamente, todo e qualquer modelo de 82 00:04:55,060 --> 00:04:59,410 ‫pug terá acesso à resposta. locais e tudo 83 00:04:59,410 --> 00:05:02,060 ‫o que colocarmos, haverá uma 84 00:05:02,060 --> 00:05:04,300 ‫variável dentro desses modelos. 85 00:05:04,300 --> 00:05:07,350 ‫Portanto, é um pouco como passar dados para um modelo usando 86 00:05:07,350 --> 00:05:08,713 ‫a função de renderização. 87 00:05:11,870 --> 00:05:14,400 ‫Este nós não precisamos mais, porque colocaremos este 88 00:05:14,400 --> 00:05:17,593 ‫usuário atual na resposta. habitantes locais. 89 00:05:20,710 --> 00:05:24,450 ‫E, claro, depois disso, o próximo middleware é chamado. 90 00:05:24,450 --> 00:05:27,833 ‫E também precisamos fazer isso fora desse If, então, caso 91 00:05:30,930 --> 00:05:32,660 ‫não haja cookie, então é 92 00:05:32,660 --> 00:05:34,180 ‫claro que o 93 00:05:34,180 --> 00:05:35,900 ‫próximo middleware será chamado 94 00:05:35,900 --> 00:05:38,380 ‫imediatamente, porque então é claro que não 95 00:05:38,380 --> 00:05:41,010 ‫há como realmente haver um usuário conectado. 96 00:05:41,010 --> 00:05:44,260 ‫Então, novamente, se não houver cookie, não 97 00:05:44,260 --> 00:05:46,170 ‫há usuário conectado. 98 00:05:46,170 --> 00:05:49,050 ‫Em seguida, não colocaremos o usuário 99 00:05:49,050 --> 00:05:52,283 ‫atual na resposta. habitantes locais. 100 00:05:53,410 --> 00:05:55,240 ‫Mas se houver um 101 00:05:55,240 --> 00:05:58,180 ‫cookie, bem, então passaremos por todas essas etapas de 102 00:05:58,180 --> 00:06:00,400 ‫verificação e, no final, se nenhum 103 00:06:00,400 --> 00:06:02,530 ‫deles chamar bem o próximo middleware 104 00:06:02,530 --> 00:06:05,620 ‫na pilha, isso significa que há um usuário conectado. 105 00:06:05,620 --> 00:06:09,510 ‫E, portanto, colocamos esse usuário em resposta. locais, e assim, temos acesso 106 00:06:09,510 --> 00:06:12,190 ‫a esse usuário em nossos modelos 107 00:06:12,190 --> 00:06:13,573 ‫de pug. 108 00:06:15,090 --> 00:06:19,230 ‫Por exemplo, bem aqui no cabeçalho, que é realmente 109 00:06:19,230 --> 00:06:22,493 ‫onde estará a navegação do usuário. 110 00:06:23,810 --> 00:06:25,990 ‫Então, vamos usar isso aqui 111 00:06:25,990 --> 00:06:29,380 ‫em um segundo, mas antes, é claro, também precisamos 112 00:06:29,380 --> 00:06:31,733 ‫daquele novo middleware que acabamos de criar. 113 00:06:32,950 --> 00:06:35,563 ‫E então vamos vir aqui para ver a rota 114 00:06:37,320 --> 00:06:39,210 ‫e, como eu estava dizendo 115 00:06:39,210 --> 00:06:41,240 ‫no início, queremos que esse middleware seja 116 00:06:41,240 --> 00:06:43,710 ‫aplicado a todas as rotas que temos aqui. 117 00:06:43,710 --> 00:06:45,840 ‫Então, fazemos isso um pouco como 118 00:06:45,840 --> 00:06:48,210 ‫fizemos antes com o middleware de proteção. 119 00:06:48,210 --> 00:06:51,330 ‫Então, basicamente, colocá-lo aqui antes de todas as outras rotas. 120 00:06:51,330 --> 00:06:54,020 ‫E então ele será colocado na pilha de 121 00:06:54,020 --> 00:06:56,403 ‫middleware para cada solicitação que chegar. 122 00:06:57,820 --> 00:07:02,820 ‫Então, roteador. use, authController. isLoggedIn. 123 00:07:07,250 --> 00:07:10,140 ‫E também vamos remover essa proteção da página 124 00:07:10,140 --> 00:07:12,180 ‫de detalhes do tour, porque 125 00:07:12,180 --> 00:07:14,803 ‫isso não faz nenhum sentido, na verdade. 126 00:07:15,690 --> 00:07:18,433 ‫Agora estamos prontos para usar isso. 127 00:07:19,290 --> 00:07:23,103 ‫Então, vamos chegar aqui ao nosso cabeçalho e usar uma condicional. 128 00:07:24,420 --> 00:07:25,500 ‫Agora lembre-se 129 00:07:25,500 --> 00:07:29,260 ‫de como eu disse antes que as condicionais no pug não 130 00:07:29,260 --> 00:07:32,570 ‫eram muito poderosas e muitas vezes usamos Java Script. 131 00:07:32,570 --> 00:07:34,340 ‫Mas, para o que queremos fazer 132 00:07:34,340 --> 00:07:36,270 ‫agora, eles são realmente bons o suficiente. 133 00:07:36,270 --> 00:07:40,793 ‫Portanto, tudo o que queremos fazer agora é dizer se é o usuário. 134 00:07:42,020 --> 00:07:46,980 ‫E para isso, eles funcionam bem para coisas muito simples, simplesmente para 135 00:07:46,980 --> 00:07:50,063 ‫testar se uma variável existe ou não. 136 00:07:52,273 --> 00:07:56,380 ‫Portanto, se houver um usuário, queremos exibir o que 137 00:07:56,380 --> 00:07:59,853 ‫temos aqui, então vamos colocá-lo lá. 138 00:08:00,940 --> 00:08:02,433 ‫Então, estou copiando 139 00:08:05,000 --> 00:08:06,410 ‫aqui, 140 00:08:09,150 --> 00:08:13,560 ‫comentando este código e aqui, dizemos mais. 141 00:08:13,560 --> 00:08:17,670 ‫Assim como em Java Script, podemos dizer if, else. 142 00:08:17,670 --> 00:08:20,300 ‫Então, aqui, na verdade, não quero minhas reservas, mas, 143 00:08:20,300 --> 00:08:22,580 ‫em vez disso, quero fazer logout. 144 00:08:22,580 --> 00:08:24,173 ‫Não tenho certeza por que isso está lá. 145 00:08:25,490 --> 00:08:29,000 ‫Portanto, ele é desconectado e também tem uma classe 146 00:08:29,980 --> 00:08:33,313 ‫especial que criei para torná-lo especial em CSS. 147 00:08:34,180 --> 00:08:39,180 ‫Então nav, el, e então com o modificador, logout, e vamos 148 00:08:40,860 --> 00:08:44,713 ‫também remover este atributo href de lá. 149 00:08:47,270 --> 00:08:49,743 ‫Então aqui, queremos o nome 150 00:08:53,010 --> 00:08:57,040 ‫do usuário, então usuário. nome e, na verdade, queremos apenas o primeiro nome. 151 00:08:57,040 --> 00:08:59,990 ‫Por exemplo, se eu criei uma 152 00:08:59,990 --> 00:09:04,650 ‫conta chamada Jonas Schmedtmann, assim, eu só quero exibir a 153 00:09:04,650 --> 00:09:07,293 ‫parte do Jonas aqui. 154 00:09:08,530 --> 00:09:11,810 ‫Portanto, vamos dividir o nome usando espaços e, em 155 00:09:11,810 --> 00:09:14,030 ‫seguida, exibir apenas o primeiro elemento 156 00:09:14,030 --> 00:09:15,623 ‫do array resultante. 157 00:09:18,330 --> 00:09:21,280 ‫Lembre-se de que aqui podemos simplesmente usar Java Script assim. 158 00:09:22,610 --> 00:09:26,513 ‫Divida-o por um espaço e, em seguida, apenas o primeiro elemento. 159 00:09:28,330 --> 00:09:31,593 ‫Então aqui é claro que também queremos aquela foto, 160 00:09:33,430 --> 00:09:37,300 ‫então essa é a imagem / usuários, lembre-se, eu acredito 161 00:09:37,300 --> 00:09:38,313 ‫pelo menos. 162 00:09:41,930 --> 00:09:43,377 ‫Então, vamos lá, usuários. 163 00:09:46,660 --> 00:09:49,683 ‫E então tudo o que vem de nosso banco de dados. 164 00:09:53,220 --> 00:09:56,747 ‫Então, usuário. foto, e então 165 00:09:56,747 --> 00:10:00,880 ‫também podemos dar-lhe um bom texto alternativo que é 166 00:10:00,880 --> 00:10:03,737 ‫muito importante para a acessibilidade. 167 00:10:03,737 --> 00:10:05,723 ‫Vamos acertar aqui. 168 00:10:12,070 --> 00:10:14,040 ‫Então, vamos testar isso 169 00:10:14,040 --> 00:10:18,113 ‫agora, porque estou realmente curioso para ver se funciona. 170 00:10:19,780 --> 00:10:22,180 ‫Assim como antes, deixe-me prosseguir e 171 00:10:22,180 --> 00:10:24,393 ‫excluir o cookie aqui. 172 00:10:25,610 --> 00:10:28,900 ‫Não tenho certeza do que este armazenamento local está fazendo aqui agora. 173 00:10:28,900 --> 00:10:33,163 ‫Vamos remover isso também, e este cookie também. 174 00:10:35,030 --> 00:10:38,460 ‫Portanto, vamos voltar ao login aqui e agora 175 00:10:38,460 --> 00:10:40,903 ‫terei que digitar novamente. teste de io, um, dois, três, quatro. 176 00:10:44,217 --> 00:10:48,260 ‫Vamos apenas copiar aqui, faça o login e, de 177 00:10:48,260 --> 00:10:50,940 ‫fato, estamos logados com sucesso. 178 00:10:50,940 --> 00:10:55,420 ‫Então, pegamos nosso cookie agora, vamos lá. 179 00:10:55,420 --> 00:10:59,040 ‫Mas é claro que nossa foto e nome de usuário 180 00:10:59,040 --> 00:11:01,820 ‫não foram exibidos imediatamente aqui, e isso é 181 00:11:01,820 --> 00:11:04,470 ‫claro porque isso só pode acontecer depois 182 00:11:04,470 --> 00:11:06,210 ‫de uma recarga, 183 00:11:06,210 --> 00:11:08,450 ‫porque é o expresso quem renderiza 184 00:11:08,450 --> 00:11:11,470 ‫essas páginas, então meio que precisa ser uma recarga. 185 00:11:11,470 --> 00:11:13,443 ‫Então, vamos implementar isso em um segundo, 186 00:11:15,120 --> 00:11:17,460 ‫mas por enquanto vamos ver se realmente estamos logados. 187 00:11:17,460 --> 00:11:22,160 ‫Então, vamos ver todos os tours aqui, e 188 00:11:22,160 --> 00:11:25,400 ‫agora temos esse erro aqui. 189 00:11:25,400 --> 00:11:28,180 ‫Tente recarregar aqui. 190 00:11:28,180 --> 00:11:29,373 ‫Bem, diz que não consegue encontrar no servidor. 191 00:11:30,490 --> 00:11:33,630 ‫O que acontece se recarregarmos aqui? 192 00:11:33,630 --> 00:11:35,633 ‫Bem, este funciona, e você vê que 193 00:11:37,400 --> 00:11:39,936 ‫na verdade nosso menu de usuário já está aqui. 194 00:11:39,936 --> 00:11:42,910 ‫Então, obtemos nosso botão e 195 00:11:42,910 --> 00:11:46,220 ‫imagem de logout e, claro, meu nome. 196 00:11:46,220 --> 00:11:48,490 ‫Excelente. 197 00:11:48,490 --> 00:11:49,870 ‫Agora, vamos tentar 198 00:11:49,870 --> 00:11:51,890 ‫basicamente fazer logout, excluindo este cookie. 199 00:11:51,890 --> 00:11:53,670 ‫E no próximo 200 00:11:53,670 --> 00:11:55,900 ‫vídeo iremos implementar esta funcionalidade exata. 201 00:11:55,900 --> 00:11:57,433 ‫E se recarregarmos agora, ele está de volta, ótimo! 202 00:11:59,530 --> 00:12:03,160 ‫Portanto, a função de middleware que acabamos de criar 203 00:12:03,160 --> 00:12:05,840 ‫está realmente fazendo seu trabalho. 204 00:12:05,840 --> 00:12:07,663 ‫Vamos apenas logar 205 00:12:08,500 --> 00:12:12,440 ‫como outra pessoa aqui, então digamos Laura, tudo bem. 206 00:12:12,440 --> 00:12:15,713 ‫Então Laura, e depois com a mesma 207 00:12:17,870 --> 00:12:20,930 ‫senha teste um, dois, três, quatro, 208 00:12:20,930 --> 00:12:25,190 ‫faça o login, está tudo bem, recarregue e pronto. 209 00:12:25,190 --> 00:12:29,690 ‫Então, isso está funcionando muito bem. 210 00:12:29,690 --> 00:12:31,680 ‫Só estou preocupado com esse 211 00:12:31,680 --> 00:12:33,900 ‫erro e, portanto, antes de fazermos qualquer 212 00:12:33,900 --> 00:12:35,580 ‫outra coisa, precisamos consertá-lo. 213 00:12:35,580 --> 00:12:37,890 ‫E como esse erro só começou 214 00:12:37,890 --> 00:12:40,000 ‫quando começamos a usar 215 00:12:40,000 --> 00:12:43,060 ‫esse novo middleware, vamos apenas ter certeza, ver 216 00:12:43,060 --> 00:12:45,520 ‫se há algo a ver com isso. 217 00:12:45,520 --> 00:12:47,020 ‫Então, se removermos esse 218 00:12:48,110 --> 00:12:50,530 ‫middleware, vamos ver se ele voltou a funcionar. 219 00:12:50,530 --> 00:12:52,853 ‫E sim, agora. 220 00:12:54,860 --> 00:12:56,570 ‫Então isso é um pouco estranho. 221 00:12:56,570 --> 00:12:58,253 ‫Vamos dar uma olhada 222 00:12:59,218 --> 00:13:02,790 ‫se podemos encontrar algum bug nesta função de middleware. 223 00:13:02,790 --> 00:13:05,023 ‫O que vejo aqui de 224 00:13:09,560 --> 00:13:13,890 ‫imediato é que sempre voltamos cada vez que ligamos, mas 225 00:13:13,890 --> 00:13:15,760 ‫aqui na próxima não. 226 00:13:15,760 --> 00:13:18,360 ‫Isso significa que caso entremos 227 00:13:18,360 --> 00:13:22,540 ‫neste bloco aqui, o próximo middleware será chamado, mas 228 00:13:22,540 --> 00:13:24,490 ‫novamente o próximo 229 00:13:24,490 --> 00:13:27,060 ‫middleware será chamado depois disso. 230 00:13:27,060 --> 00:13:28,633 ‫Portanto, provavelmente precisamos retornar este aqui também. 231 00:13:30,630 --> 00:13:34,823 ‫Mas certificamo-nos de que a próxima vez só será chamada uma vez. 232 00:13:36,040 --> 00:13:40,223 ‫Então, vamos tentar isso, coloque este aqui de 233 00:13:41,670 --> 00:13:45,430 ‫volta, salve-o e role para baixo aqui. 234 00:13:45,430 --> 00:13:48,713 ‫Sim, isso funciona agora. 235 00:13:53,460 --> 00:13:54,510 ‫Colocamos nosso 236 00:13:55,840 --> 00:13:59,490 ‫usuário logado aqui também agora, e claro, se excluirmos 237 00:13:59,490 --> 00:14:03,610 ‫o cookie basicamente desconectando o usuário, recarregar agora, então estaremos 238 00:14:03,610 --> 00:14:05,330 ‫de volta ao normal. 239 00:14:05,330 --> 00:14:09,283 ‫Em seguida, o que queremos corrigir aqui é realmente receber 240 00:14:12,366 --> 00:14:14,430 ‫um alerta aqui e 241 00:14:14,430 --> 00:14:16,930 ‫também recarregar a página após algum tempo. 242 00:14:16,930 --> 00:14:20,133 ‫Na verdade, não estou recarregando, mas sim enviando-o de 243 00:14:21,620 --> 00:14:23,400 ‫volta para a página inicial. 244 00:14:23,400 --> 00:14:26,343 ‫Então, agora aqui isso se foi e, como eu 245 00:14:28,570 --> 00:14:30,410 ‫disse antes, só vemos 246 00:14:30,410 --> 00:14:33,330 ‫esse menu de usuário quando recarregamos a página. 247 00:14:33,330 --> 00:14:36,230 ‫Então é isso que faremos agora automaticamente 248 00:14:36,230 --> 00:14:38,800 ‫em nosso código Java Script aqui. 249 00:14:38,800 --> 00:14:40,293 ‫Portanto, vamos primeiro nos livrar desses dados aqui. 250 00:14:41,882 --> 00:14:45,280 ‫Registrar dados confidenciais no console nunca é uma boa 251 00:14:46,350 --> 00:14:48,340 ‫ideia, e agora vamos fazer o 252 00:14:48,340 --> 00:14:50,140 ‫que acabei de dizer. 253 00:14:50,140 --> 00:14:53,403 ‫Portanto, aqui fazemos uma solicitação e, claro, 254 00:14:54,250 --> 00:14:58,220 ‫também mostrarei como podemos enviar dados diretamente de um 255 00:14:58,220 --> 00:15:01,220 ‫formulário htl para nosso aplicativo Note. 256 00:15:01,220 --> 00:15:04,503 ‫Existem duas maneiras. 257 00:15:06,430 --> 00:15:07,410 ‫Uma maneira é enviar 258 00:15:07,410 --> 00:15:09,260 ‫dados usando uma solicitação http, como fizemos aqui. 259 00:15:09,260 --> 00:15:11,750 ‫E outra é simplesmente usar diretamente um formulário html. 260 00:15:11,750 --> 00:15:15,940 ‫E esse também é muito importante e, um pouco 261 00:15:15,940 --> 00:15:17,960 ‫mais tarde na seção, 262 00:15:17,960 --> 00:15:21,130 ‫mostrarei a você como fazer esse também. 263 00:15:21,130 --> 00:15:23,090 ‫De qualquer forma, vamos agora mostrar aquele alerta e recarregar a página. 264 00:15:23,090 --> 00:15:27,200 ‫Vamos fazer isso apenas no caso de termos certeza de 265 00:15:27,200 --> 00:15:30,320 ‫que nossa chamada de API foi bem-sucedida. 266 00:15:30,320 --> 00:15:32,870 ‫Digamos resposta. dados e, portanto, esses dados são, na 267 00:15:32,870 --> 00:15:36,290 ‫verdade, os dados 268 00:15:36,290 --> 00:15:38,600 ‫que enviamos como nossa resposta do 269 00:15:38,600 --> 00:15:41,220 ‫dia e, a partir daí, podemos ler. status e verifique se é 270 00:15:41,220 --> 00:15:44,693 ‫igual a sucesso. 271 00:15:44,693 --> 00:15:47,483 ‫Portanto, lembre-se de como sempre definimos o 272 00:15:50,439 --> 00:15:53,920 ‫status para sucesso e agora podemos realmente usar isso 273 00:15:53,920 --> 00:15:55,900 ‫para realizar essa verificação. 274 00:15:55,900 --> 00:15:58,093 ‫Portanto, vamos usar um alerta simples 275 00:15:59,038 --> 00:16:02,147 ‫de Java Script, como este, e dizer conectado com sucesso. 276 00:16:02,147 --> 00:16:07,147 ‫Vamos nos livrar disso e também depois de um segundo 277 00:16:14,120 --> 00:16:17,950 ‫e meio carregar a primeira página. 278 00:16:17,950 --> 00:16:21,330 ‫Então, basicamente, a página inicial. 279 00:16:21,330 --> 00:16:22,730 ‫Então, janela. setTimeout, aqui a 280 00:16:23,640 --> 00:16:28,640 ‫função de retorno de chamada e, portanto, 281 00:16:31,100 --> 00:16:33,400 ‫para carregar outra página, dizemos localização. atribuir e, em seguida, simplesmente vamos para a 282 00:16:33,400 --> 00:16:36,633 ‫página inicial como esta. 283 00:16:37,700 --> 00:16:41,563 ‫E queremos fazer isso após 1.500 milissegundos, 284 00:16:43,690 --> 00:16:47,120 ‫então, um segundo e meio. 285 00:16:47,120 --> 00:16:49,023 ‫Então, caso 286 00:16:49,990 --> 00:16:52,780 ‫não tenhamos obtido sucesso, não 287 00:16:52,780 --> 00:16:55,950 ‫queremos registrar isso, mas sim alertá-lo. 288 00:16:55,950 --> 00:16:57,553 ‫Portanto, alerta, e novamente, esses 289 00:16:59,600 --> 00:17:02,350 ‫dados aqui são, na verdade, nossa resposta de dados. 290 00:17:02,350 --> 00:17:04,533 ‫Então, a partir daqui, vamos ler a propriedade da mensagem. 291 00:17:05,793 --> 00:17:08,403 ‫Isso deve funcionar, vamos recarregar aqui. 292 00:17:14,680 --> 00:17:17,313 ‫Ok, essa não é a pessoa certa. 293 00:17:19,930 --> 00:17:21,853 ‫Então, em vez de admin em natours. io, teste um, 294 00:17:22,830 --> 00:17:27,413 ‫dois, três, quatro, cinco, 295 00:17:29,230 --> 00:17:31,770 ‫para ver o erro primeiro. 296 00:17:31,770 --> 00:17:34,270 ‫E então você vê, e-mail 297 00:17:34,270 --> 00:17:37,490 ‫ou senha incorreta, e claro, isso é porque 298 00:17:37,490 --> 00:17:40,783 ‫nossa senha estava errada, então vamos nos livrar disso, 299 00:17:41,960 --> 00:17:44,750 ‫faça o login e logue-se com sucesso. 300 00:17:44,750 --> 00:17:46,630 ‫Agora vamos ver o que acontece. 301 00:17:46,630 --> 00:17:48,710 ‫Na verdade, ele não recarrega 302 00:17:48,710 --> 00:17:51,310 ‫automaticamente, porque antes que isso aconteça, precisamos 303 00:17:51,310 --> 00:17:52,970 ‫fechar esta janela. 304 00:17:52,970 --> 00:17:54,700 ‫Assim que fecharmos, devemos recarregar imediatamente. 305 00:17:54,700 --> 00:17:57,963 ‫E aí vamos nós. 306 00:18:00,690 --> 00:18:01,973 ‫Estamos agora na página 307 00:18:02,950 --> 00:18:05,810 ‫inicial e novamente com nosso menu de usuário correto renderizado aqui, perfeito. 308 00:18:05,810 --> 00:18:10,213 ‫Portanto, esta parte também está concluída e, agora, como 309 00:18:11,990 --> 00:18:14,530 ‫última etapa, quero melhorar esses alertas 310 00:18:14,530 --> 00:18:17,020 ‫que o usuário recebe. 311 00:18:17,020 --> 00:18:19,060 ‫Em vez de exibir esses alertas Java Script integrados. 312 00:18:19,060 --> 00:18:22,333 ‫Além disso, faremos aquele agrupamento de Java Script que 313 00:18:23,230 --> 00:18:26,050 ‫mencionei algumas vezes, mas deixaremos tudo isso 314 00:18:26,050 --> 00:18:28,490 ‫para o próximo vídeo porque 315 00:18:28,490 --> 00:18:31,320 ‫não quero sobrecarregar muito cada um deles.