1 00:00:01,180 --> 00:00:02,070 ‫Instrutor: Neste 2 00:00:02,070 --> 00:00:04,620 ‫vídeo, vamos construir a página da conta 3 00:00:04,620 --> 00:00:07,270 ‫do usuário usando principalmente conceitos que já conhecemos 4 00:00:07,270 --> 00:00:08,823 ‫e já usamos antes. 5 00:00:10,560 --> 00:00:12,470 ‫E vamos começar dando uma olhada no 6 00:00:12,470 --> 00:00:15,340 ‫que eu realmente quero dizer com a página da conta do usuário 7 00:00:15,340 --> 00:00:20,230 ‫em nosso site de referência, então aqui no natours. dev. 8 00:00:20,230 --> 00:00:22,920 ‫Então já renderizamos este menu aqui 9 00:00:22,920 --> 00:00:24,210 ‫em nosso 10 00:00:24,210 --> 00:00:27,430 ‫site, mas quando clicamos então neste usuário obtemos 11 00:00:27,430 --> 00:00:30,210 ‫acesso à página da conta do usuário. 12 00:00:30,210 --> 00:00:33,349 ‫E então aqui, podemos alterar algumas configurações básicas, 13 00:00:33,349 --> 00:00:35,807 ‫também fazer o upload de uma nova 14 00:00:35,807 --> 00:00:37,540 ‫foto, mas esta vamos 15 00:00:37,540 --> 00:00:39,013 ‫fazer na próxima 16 00:00:40,043 --> 00:00:44,690 ‫seção na verdade, e o usuário também pode atualizar sua senha nesta página. 17 00:00:44,690 --> 00:00:47,590 ‫Então, no lado esquerdo há alguns itens de 18 00:00:47,590 --> 00:00:49,740 ‫menu, que não iremos realmente 19 00:00:49,740 --> 00:00:52,120 ‫implementar, então vamos apenas implementar o 20 00:00:52,120 --> 00:00:55,027 ‫menu, mas não realmente as páginas para as 21 00:00:55,027 --> 00:00:57,840 ‫quais eles apontam, e então se o usuário 22 00:00:57,840 --> 00:01:00,690 ‫for um administrador, também renderizamos esta parte aqui. 23 00:01:00,690 --> 00:01:04,380 ‫Ok, então é isso que construiremos nesta aula, e 24 00:01:04,380 --> 00:01:06,440 ‫nas próximas aulas iremos 25 00:01:06,440 --> 00:01:09,440 ‫cuidar de realmente atualizar as configurações. 26 00:01:09,440 --> 00:01:13,113 ‫Então, basicamente fazendo esses botões funcionarem. 27 00:01:14,227 --> 00:01:15,060 ‫Tudo bem? 28 00:01:15,060 --> 00:01:17,620 ‫Mas, por enquanto, é apenas renderizar esta página 29 00:01:17,620 --> 00:01:19,443 ‫aqui neste. me URL. 30 00:01:21,370 --> 00:01:22,610 ‫OK? 31 00:01:22,610 --> 00:01:25,343 ‫Então, vamos começar com o modelo pug. 32 00:01:26,250 --> 00:01:28,080 ‫Tudo bem, e como 33 00:01:28,080 --> 00:01:30,873 ‫sempre, já tenho esse modelo de conta aqui. 34 00:01:32,050 --> 00:01:34,453 ‫Então, vamos pegá-lo, copiá-lo e, em 35 00:01:37,810 --> 00:01:40,253 ‫seguida, criar uma nova visualização aqui, que 36 00:01:42,730 --> 00:01:44,360 ‫estou chamando de conta. 37 00:01:44,360 --> 00:01:46,810 ‫E agora queremos estender 38 00:01:51,281 --> 00:01:56,270 ‫a base e queremos criar um bloco chamado conteúdo como sempre. 39 00:01:56,270 --> 00:01:59,863 ‫E aqui é onde realmente colamos nosso conteúdo. 40 00:02:00,740 --> 00:02:02,010 ‫Tudo bem? 41 00:02:02,010 --> 00:02:04,000 ‫Agora precisamos recuar 42 00:02:05,850 --> 00:02:09,803 ‫tudo isso para torná-lo dentro do bloco. 43 00:02:10,640 --> 00:02:15,640 ‫Ótimo, então aqui primeiro temos a nossa navegação, certo? 44 00:02:15,670 --> 00:02:18,540 ‫Então, configurações, reservas, resenhas e faturamentos que 45 00:02:18,540 --> 00:02:21,020 ‫vimos lá no lado esquerdo 46 00:02:21,020 --> 00:02:25,430 ‫da página, e também temos a navegação de administrador, certo? 47 00:02:25,430 --> 00:02:28,590 ‫E eles já veem muitos códigos duplicados aqui. 48 00:02:28,590 --> 00:02:31,770 ‫Então, basicamente, esses elementos de item de lista 49 00:02:31,770 --> 00:02:34,950 ‫aqui, eles aparecem na verdade oito vezes. 50 00:02:34,950 --> 00:02:38,970 ‫Então, quatro vezes aqui em cima e quatro vezes aqui em baixo, 51 00:02:38,970 --> 00:02:41,730 ‫vamos criar rapidamente um mixin para eles para fazer 52 00:02:41,730 --> 00:02:44,330 ‫nosso código parecer um pouco mais limpo. 53 00:02:44,330 --> 00:02:46,310 ‫Tudo bem, então vou seguir 54 00:02:46,310 --> 00:02:48,610 ‫em frente e realmente copiar um destes. 55 00:02:48,610 --> 00:02:52,953 ‫E então crie um novo mixin chamado navItem. 56 00:02:55,600 --> 00:02:57,480 ‫Ok, então fizemos isso antes. 57 00:02:57,480 --> 00:02:59,120 ‫Portanto, isso é muito semelhante. 58 00:02:59,120 --> 00:03:01,500 ‫Então, o que precisamos passar para 59 00:03:01,500 --> 00:03:05,100 ‫este mixin a fim de personalizar basicamente cada um desses itens? 60 00:03:05,100 --> 00:03:07,773 ‫Bem, o que vai mudar é o link. 61 00:03:08,960 --> 00:03:13,960 ‫Também o texto, configurações, reservas, etc. 62 00:03:14,790 --> 00:03:16,360 ‫Então isso é texto. 63 00:03:16,360 --> 00:03:19,240 ‫Aí também o ícone vai mudar, e 64 00:03:19,240 --> 00:03:21,980 ‫finalmente você vê que esse 65 00:03:21,980 --> 00:03:25,690 ‫primeiro aqui tem o side-nav - classe ativa, certo? 66 00:03:25,690 --> 00:03:30,530 ‫E então também especificaremos um ativo como aqui, basicamente. 67 00:03:30,530 --> 00:03:33,110 ‫E então, quando quisermos marcar um item 68 00:03:33,110 --> 00:03:35,390 ‫como ativo, simplesmente passaremos por aqui. 69 00:03:35,390 --> 00:03:36,762 ‫OK? 70 00:03:36,762 --> 00:03:39,573 ‫Portanto, agora precisamos corrigir o recuo aqui. 71 00:03:47,530 --> 00:03:49,123 ‫E então passe nossos dados. 72 00:03:54,930 --> 00:03:56,363 ‫O próximo é o texto. 73 00:03:59,900 --> 00:04:01,900 ‫Então, é claro que neste 74 00:04:01,900 --> 00:04:06,607 ‫ponto, não é nada novo, então estou fazendo isso bem rápido aqui, certo? 75 00:04:07,910 --> 00:04:12,000 ‫Então, ícone e, em seguida, o nome do ícone que passamos. 76 00:04:12,000 --> 00:04:13,860 ‫Assim como fizemos antes, e 77 00:04:13,860 --> 00:04:15,640 ‫finalmente este ativo 78 00:04:15,640 --> 00:04:18,220 ‫aqui, lembre-se, será verdadeiro ou falso. 79 00:04:18,220 --> 00:04:21,840 ‫E se for verdade, então queremos adicionar esta classe. 80 00:04:21,840 --> 00:04:22,753 ‫Então, vamos copiá-lo. 81 00:04:23,950 --> 00:04:27,063 ‫E então vamos especificar o atributo de classe. 82 00:04:29,820 --> 00:04:31,470 ‫E então, assim como 83 00:04:31,470 --> 00:04:33,910 ‫fizemos, vamos fazer uma declaração turnery aqui. 84 00:04:33,910 --> 00:04:38,480 ‫Dizendo se ativo, basicamente, então aqui queremos 85 00:04:38,480 --> 00:04:42,003 ‫ter side-nav - ativo. 86 00:04:43,010 --> 00:04:45,490 ‫E se não, não queremos nada. 87 00:04:45,490 --> 00:04:47,243 ‫Portanto, um nome de classe vazio, basicamente. 88 00:04:49,030 --> 00:04:49,980 ‫Tudo bem. 89 00:04:49,980 --> 00:04:53,800 ‫E agora podemos substituir isso pelo nosso mixin. 90 00:04:53,800 --> 00:04:57,270 ‫Isso é chamado de navItem e, portanto, lembre-se, 91 00:04:57,270 --> 00:05:00,180 ‫escrevemos + e, em seguida, navItem. 92 00:05:01,820 --> 00:05:05,230 ‫Portanto, aqui o link é um link vazio. 93 00:05:05,230 --> 00:05:07,520 ‫E, na verdade, para todos eles, por enquanto. 94 00:05:07,520 --> 00:05:08,353 ‫Em seguida, 95 00:05:09,780 --> 00:05:10,623 ‫Configurações e, em 96 00:05:12,420 --> 00:05:14,980 ‫seguida, o nome do ícone, que também é configurações, 97 00:05:14,980 --> 00:05:16,083 ‫mas em letras minúsculas. 98 00:05:18,341 --> 00:05:21,060 ‫E então, finalmente, este está realmente ativo, então 99 00:05:21,060 --> 00:05:22,323 ‫passamos o verdadeiro. 100 00:05:25,541 --> 00:05:28,057 ‫Tudo bem, vamos duplicar. 101 00:05:31,710 --> 00:05:36,513 ‫Tenha uma pasta e nós temos Minhas Reservas. 102 00:05:37,680 --> 00:05:39,490 ‫Vamos fazer isso em minúsculas. 103 00:05:39,490 --> 00:05:43,090 ‫Certo, duplique mais duas vezes. 104 00:05:43,090 --> 00:05:44,480 ‫Aqui temos 105 00:05:48,360 --> 00:05:49,990 ‫estrela e aqui 106 00:05:53,600 --> 00:05:56,423 ‫cartão de crédito para cobrança. 107 00:05:59,550 --> 00:06:00,383 ‫Tudo bem. 108 00:06:04,270 --> 00:06:06,820 ‫E agora temos a navegação de administrador. 109 00:06:06,820 --> 00:06:08,560 ‫E este só estará 110 00:06:08,560 --> 00:06:11,660 ‫visível se o usuário atual for um administrador. 111 00:06:11,660 --> 00:06:15,660 ‫Então, vamos definir isso usando uma instrução if. 112 00:06:15,660 --> 00:06:18,370 ‫E aqui precisamos testar se a função do usuário 113 00:06:18,370 --> 00:06:20,360 ‫é igual a admin, certo? 114 00:06:20,360 --> 00:06:21,270 ‫E essa 115 00:06:21,270 --> 00:06:23,450 ‫é, novamente, uma dessas instruções if mais 116 00:06:23,450 --> 00:06:26,410 ‫complexas e, portanto, temos que usar JavaScript para isso. 117 00:06:26,410 --> 00:06:29,441 ‫Portanto, estou usando aqui código sem buffer novamente. 118 00:06:29,441 --> 00:06:30,640 ‫E então, se 119 00:06:32,560 --> 00:06:35,710 ‫e assim, teremos acesso à variável de usuário aqui. 120 00:06:35,710 --> 00:06:38,290 ‫Assim como fizemos em outros modelos. 121 00:06:38,290 --> 00:06:41,200 ‫Então, basicamente, vamos passar para aqui. 122 00:06:41,200 --> 00:06:44,750 ‫E então, é claro, o usuário tem o atributo role, 123 00:06:44,750 --> 00:06:47,210 ‫e então testamos se é admin. 124 00:06:47,210 --> 00:06:51,230 ‫E se for, então queremos mostrar tudo isso. 125 00:06:51,230 --> 00:06:54,963 ‫E agora precisa ter um recuo de nível. 126 00:06:56,760 --> 00:06:57,593 ‫OK? 127 00:06:57,593 --> 00:07:00,270 ‫E, claro, agora queremos substituir 128 00:07:00,270 --> 00:07:03,023 ‫tudo isso aqui pelo nosso mixin também. 129 00:07:07,900 --> 00:07:09,083 ‫Então, quatro vezes. 130 00:07:10,370 --> 00:07:13,003 ‫Este é chamado de mapa. 131 00:07:14,380 --> 00:07:15,613 ‫Gerenciar passeios. 132 00:07:23,350 --> 00:07:24,823 ‫Este é Gerenciar usuários. 133 00:07:38,080 --> 00:07:39,323 ‫Gerenciar avaliações. 134 00:07:41,400 --> 00:07:43,800 ‫E finalmente temos um com a pasta. 135 00:07:46,450 --> 00:07:49,030 ‫E este aqui não tem o texto, 136 00:07:49,030 --> 00:07:50,723 ‫mas é Gerenciar reservas. 137 00:07:55,548 --> 00:07:56,830 ‫Tudo bem. 138 00:07:56,830 --> 00:08:01,830 ‫Então, vamos nos livrar disso e continuar nosso trabalho aqui. 139 00:08:01,850 --> 00:08:03,830 ‫Portanto, este aqui será o 140 00:08:03,830 --> 00:08:06,130 ‫formulário para alterar as configurações do usuário. 141 00:08:06,130 --> 00:08:10,600 ‫E assim os dados pessoais ficarão aqui nestes valores, ok? 142 00:08:10,600 --> 00:08:14,460 ‫Então, basicamente, em um elemento de entrada HTML, o valor é 143 00:08:14,460 --> 00:08:17,300 ‫uma espécie de texto predefinido que 144 00:08:17,300 --> 00:08:20,220 ‫podemos colocar dentro de um elemento de entrada. 145 00:08:20,220 --> 00:08:21,690 ‫E normalmente o que 146 00:08:21,690 --> 00:08:23,930 ‫colocamos lá é o valor atual dessa 147 00:08:23,930 --> 00:08:25,160 ‫entrada, desse campo. 148 00:08:25,160 --> 00:08:28,780 ‫E agora, esse é, obviamente, o nome do usuário. 149 00:08:28,780 --> 00:08:30,130 ‫E então vamos colocar isso aqui. 150 00:08:34,940 --> 00:08:36,480 ‫Do utilizador. nome. 151 00:08:36,480 --> 00:08:40,202 ‫E aqui está o e-mail, 152 00:08:40,202 --> 00:08:42,693 ‫é claro. 153 00:08:45,610 --> 00:08:49,343 ‫E aqui também temos a imagem do usuário. 154 00:08:54,060 --> 00:08:59,060 ‫Assim, os usuários de barra de imagem cortam o próprio nome da imagem. 155 00:09:01,610 --> 00:09:02,443 ‫OK. 156 00:09:04,350 --> 00:09:06,783 ‫Então aqui embaixo não há nada a fazer. 157 00:09:07,720 --> 00:09:08,670 ‫Tudo bem? 158 00:09:08,670 --> 00:09:10,470 ‫E na verdade é isso. 159 00:09:10,470 --> 00:09:12,640 ‫Então, esses são realmente todos os dados 160 00:09:12,640 --> 00:09:14,620 ‫que vêm do objeto de usuário que 161 00:09:14,620 --> 00:09:15,823 ‫temos que inserir. 162 00:09:17,300 --> 00:09:20,110 ‫Ok, então esse é o modelo. 163 00:09:20,110 --> 00:09:25,110 ‫Vamos agora adicionar a rota ao viewRouter. 164 00:09:25,460 --> 00:09:29,813 ‫Bem aqui, e este vai se chamar / me. 165 00:09:32,480 --> 00:09:35,560 ‫E então teremos um controlador chamado getAccount. 166 00:09:37,940 --> 00:09:39,330 ‫Agora, esta aqui, 167 00:09:39,330 --> 00:09:42,470 ‫é claro, vai ser uma rota protegida, certo? 168 00:09:42,470 --> 00:09:45,240 ‫Porque somente se estivermos realmente 169 00:09:45,240 --> 00:09:48,260 ‫logados teremos acesso a esta página. 170 00:09:48,260 --> 00:09:52,020 ‫E, portanto, precisamos usar nosso middleware de proteção aqui. 171 00:09:52,020 --> 00:09:55,973 ‫Então esse é um authController. proteger. 172 00:09:57,360 --> 00:09:58,730 ‫OK? 173 00:09:58,730 --> 00:10:02,100 ‫Assim como fizemos com todas ou outras rotas protegidas. 174 00:10:02,100 --> 00:10:04,500 ‫Agora, um problema que vejo com 175 00:10:04,500 --> 00:10:06,560 ‫isso é que este middleware 176 00:10:06,560 --> 00:10:09,280 ‫de proteção aqui é muito semelhante ao isLoggedIn. 177 00:10:09,280 --> 00:10:12,270 ‫E então faremos algumas operações duplicadas lá, o que 178 00:10:12,270 --> 00:10:13,610 ‫não é o ideal. 179 00:10:13,610 --> 00:10:16,500 ‫Porque lembre-se de que este 180 00:10:16,500 --> 00:10:19,930 ‫isLoggedIn será executado para todas as solicitações, certo? 181 00:10:19,930 --> 00:10:22,400 ‫Então, vamos dar uma olhada rápida neles para que eu 182 00:10:22,400 --> 00:10:24,203 ‫possa deixar meu ponto de vista. 183 00:10:25,300 --> 00:10:30,300 ‫Então, em proteger, colocamos o usuário atual aqui. 184 00:10:30,720 --> 00:10:33,020 ‫Portanto, temos este findById aqui. 185 00:10:33,020 --> 00:10:34,580 ‫Mas fazemos 186 00:10:36,757 --> 00:10:39,650 ‫o mesmo aqui em logado, ok? 187 00:10:39,650 --> 00:10:44,010 ‫E então, usando isLoggedIn e protect ao mesmo tempo, faremos essa 188 00:10:44,010 --> 00:10:45,720 ‫consulta duas vezes. 189 00:10:45,720 --> 00:10:48,410 ‫E isso não é o ideal, é claro. 190 00:10:48,410 --> 00:10:51,980 ‫E então vamos colocar isLoggedIn aqui apenas em 191 00:10:51,980 --> 00:10:55,210 ‫rotas que não são protegidas, ok? 192 00:10:55,210 --> 00:10:56,660 ‫Porque na 193 00:10:56,660 --> 00:10:58,690 ‫rota protegida essa verificação se 194 00:10:58,690 --> 00:11:02,270 ‫o usuário está logado vai realmente acontecer também, certo? 195 00:11:02,270 --> 00:11:03,870 ‫Mas não neste middleware, 196 00:11:03,870 --> 00:11:05,450 ‫mas no middleware 197 00:11:05,450 --> 00:11:09,000 ‫de proteção, porque basicamente verifica isso também, certo? 198 00:11:09,000 --> 00:11:12,573 ‫Portanto, vamos cortar daqui e simplesmente colá-lo em 199 00:11:12,573 --> 00:11:15,393 ‫outras rotas que não estejam protegidas. 200 00:11:18,550 --> 00:11:20,300 ‫Ok, faz sentido? 201 00:11:20,300 --> 00:11:23,340 ‫E assim não temos esse problema de 202 00:11:23,340 --> 00:11:26,400 ‫basicamente fazer exatamente a mesma consulta duas vezes 203 00:11:26,400 --> 00:11:28,580 ‫em todos os middlewares protegidos. 204 00:11:28,580 --> 00:11:31,680 ‫E isso é um pouco melhor para o nosso desempenho. 205 00:11:31,680 --> 00:11:34,722 ‫Agora, uma coisa que fazemos no 206 00:11:34,722 --> 00:11:36,900 ‫isLoggedIn que atualmente não 207 00:11:36,900 --> 00:11:39,880 ‫fazemos no proteger é isso aqui. 208 00:11:39,880 --> 00:11:43,510 ‫Portanto, colocamos um usuário atual na resposta. habitantes locais. 209 00:11:43,510 --> 00:11:45,534 ‫E então vamos realmente 210 00:11:45,534 --> 00:11:48,220 ‫fazer o mesmo agora no currentUser. 211 00:11:48,220 --> 00:11:51,543 ‫E então vamos fazer o mesmo aqui no middleware de proteção. 212 00:11:53,020 --> 00:11:56,510 ‫Então, você coloca o currentUser sob solicitação. usuário e na 213 00:11:56,510 --> 00:11:59,590 ‫resposta. moradores locais, certo? 214 00:11:59,590 --> 00:12:01,600 ‫Para que possamos usá-lo 215 00:12:01,600 --> 00:12:03,690 ‫automaticamente em todos os modelos posteriores. 216 00:12:03,690 --> 00:12:07,560 ‫Então, neste caso, em nosso modelo de conta, certo? 217 00:12:07,560 --> 00:12:08,693 ‫Então, dê uma chance. 218 00:12:10,080 --> 00:12:14,040 ‫E agora precisamos adicionar este controlador getAccount para, 219 00:12:14,040 --> 00:12:16,903 ‫é claro, corrigir esse erro que 220 00:12:16,903 --> 00:12:18,293 ‫recebemos atualmente. 221 00:12:19,450 --> 00:12:20,900 ‫Isso está em viewsController. solicitação e resposta getAccount. 222 00:12:27,467 --> 00:12:32,467 ‫E você verá em um segundo por que só precisamos desses dois. 223 00:12:34,370 --> 00:12:37,170 ‫Portanto, para obter a página da conta, tudo o que realmente precisamos 224 00:12:38,100 --> 00:12:39,580 ‫fazer é simplesmente renderizar essa página. 225 00:12:39,580 --> 00:12:43,370 ‫Nem mesmo precisamos consultar o usuário atual porque 226 00:12:43,370 --> 00:12:45,910 ‫isso já foi feito no middleware 227 00:12:45,910 --> 00:12:47,760 ‫de proteção, certo? 228 00:12:47,760 --> 00:12:50,030 ‫E então tudo o que realmente precisamos 229 00:12:50,030 --> 00:12:51,810 ‫fazer é fazer algo assim. 230 00:12:51,810 --> 00:12:54,110 ‫Então copie este código, e então 231 00:12:54,110 --> 00:12:55,870 ‫a conta aqui. 232 00:12:55,870 --> 00:12:59,030 ‫E vamos dar a ele um título de sua conta. 233 00:12:59,030 --> 00:13:04,030 ‫Tudo bem, então isso faz com que o erro desapareça. 234 00:13:04,430 --> 00:13:07,840 ‫E agora, como peça final do quebra-cabeça, vamos adicionar o link 235 00:13:07,840 --> 00:13:09,880 ‫correto, na verdade, no cabeçalho. 236 00:13:09,880 --> 00:13:13,063 ‫Então, aqui em nosso cabeçalho agora, o link não 237 00:13:15,000 --> 00:13:18,110 ‫aponta para a página desta conta, certo? 238 00:13:18,110 --> 00:13:21,670 ‫Portanto, não aponta para lugar nenhum. 239 00:13:21,670 --> 00:13:24,043 ‫E agora deve apontar para / mim. 240 00:13:25,110 --> 00:13:27,713 ‫Ok, então essa deve ser 241 00:13:28,820 --> 00:13:32,380 ‫a peça final para realmente fazer funcionar. 242 00:13:32,380 --> 00:13:33,763 ‫E então vamos entrar aqui 243 00:13:34,980 --> 00:13:36,840 ‫agora com o teste um, dois, três, quatro. 244 00:13:38,281 --> 00:13:40,513 ‫Estamos logados com sucesso. 245 00:13:42,050 --> 00:13:44,320 ‫E agora ao clicar aqui temos a nossa página. 246 00:13:44,320 --> 00:13:48,950 ‫Fantástico. 247 00:13:48,950 --> 00:13:50,590 ‫Agora há um erro aqui com a foto do usuário. 248 00:13:50,590 --> 00:13:54,030 ‫Então, vamos consertar isso. 249 00:13:54,030 --> 00:13:55,270 ‫Mas, além disso, na verdade, tudo está funcionando bem. 250 00:13:55,270 --> 00:13:59,460 ‫Também obtemos este menu aqui porque estamos atualmente em administração 251 00:13:59,460 --> 00:14:03,750 ‫e, portanto, vamos testá-lo também em um segundo para ver se 252 00:14:03,750 --> 00:14:06,370 ‫ele desaparece para outros usuários. 253 00:14:06,370 --> 00:14:08,903 ‫E, na verdade, também recebemos esse erro 254 00:14:11,180 --> 00:14:14,150 ‫aqui porque temos uma solicitação com falha para a imagem. 255 00:14:14,150 --> 00:14:17,500 ‫E então já vimos que provavelmente estamos fazendo 256 00:14:17,500 --> 00:14:19,070 ‫algo errado aí. 257 00:14:19,070 --> 00:14:20,920 ‫E aqui 258 00:14:22,070 --> 00:14:25,860 ‫na imagem, claro, não é usuário. nome, é o usuário. foto. 259 00:14:25,860 --> 00:14:30,500 ‫Então salve, recarregue aqui. 260 00:14:30,500 --> 00:14:33,670 ‫E agora, de fato, lá vamos nós. 261 00:14:33,670 --> 00:14:35,483 ‫Tudo bem? 262 00:14:36,840 --> 00:14:37,673 ‫Então, agora vamos sair e ver o que acontece então. 263 00:14:37,673 --> 00:14:41,200 ‫E então temos esse tipo de erro. 264 00:14:41,200 --> 00:14:43,460 ‫E isso é basicamente porque estamos 265 00:14:43,460 --> 00:14:46,200 ‫tentando acessar essa rota protegida sem estar logados. 266 00:14:46,200 --> 00:14:49,417 ‫Tudo bem? 267 00:14:49,417 --> 00:14:50,250 ‫Então, vamos tentar de novo agora. 268 00:14:51,470 --> 00:14:54,540 ‫Então, se tentarmos fazer o 269 00:14:54,540 --> 00:14:58,720 ‫login comigo, descobriremos que você não está conectado, certo? 270 00:14:58,720 --> 00:15:01,920 ‫E antes de recebermos aquele erro de aparência estranha, 271 00:15:01,920 --> 00:15:04,550 ‫porque, na verdade, estamos em desenvolvimento agora. 272 00:15:04,550 --> 00:15:07,070 ‫Mas na produção, é claro, não veríamos aquele erro 273 00:15:07,070 --> 00:15:08,290 ‫estranho que vimos antes. 274 00:15:08,290 --> 00:15:11,850 ‫Direito? 275 00:15:11,850 --> 00:15:12,710 ‫Mas o que 276 00:15:12,710 --> 00:15:15,410 ‫vemos agora é que, claro, nossa rota está realmente protegida. 277 00:15:15,410 --> 00:15:16,930 ‫Portanto, não podemos acessá-lo se não estivermos logados. 278 00:15:16,930 --> 00:15:20,090 ‫Agora só para terminar, vamos realmente logar com alguma outra 279 00:15:20,090 --> 00:15:21,270 ‫conta só para 280 00:15:21,270 --> 00:15:23,750 ‫ver se a parte do administrador também funciona. 281 00:15:23,750 --> 00:15:28,390 ‫Então, vamos, novamente, usar Laura aqui. 282 00:15:28,390 --> 00:15:31,320 ‫E você vê que ela é apenas uma usuária regular. 283 00:15:31,320 --> 00:15:33,520 ‫Tudo bem. 284 00:15:41,620 --> 00:15:42,543 ‫E agora temos 285 00:15:44,780 --> 00:15:47,950 ‫sua conta de usuário, sem, é claro, o menu de administração. 286 00:15:47,950 --> 00:15:49,740 ‫Ok, perfeito. 287 00:15:49,740 --> 00:15:51,380 ‫Então essa é a construção da página da conta. 288 00:15:51,380 --> 00:15:53,570 ‫E como eu disse antes, 289 00:15:53,570 --> 00:15:55,830 ‫no próximo vídeo, cuidaremos da atualização 290 00:15:55,830 --> 00:15:57,700 ‫dessas configurações de conta.