‫Esta é a segunda parte da construção de nossa funcionalidade de login.
‫A primeira coisa que quero
‫fazer neste vídeo é renderizar condicionalmente essa parte da página.
‫Então o que significa é renderizar
‫esses botões de login e inscrição
‫aqui, caso o usuário não esteja logado,
‫e caso o usuário de fato esteja
‫bem logado, renderizar algum tipo de menu de usuário aqui e
‫também um botão de logout.
‫Esse tipo de renderização deve
‫acontecer no back-end, portanto, em um de nossos modelos de pug.
‫Agora, como o modelo de saída realmente saberá se
‫o usuário está logado ou não?
‫Na verdade, para determinar isso,
‫teremos que criar uma nova função de middleware,
‫e realmente o único objetivo dessa nova função de
‫middleware será se o usuário está atualmente logado ou não.
‫Você pode pensar que nosso middleware de proteção
‫também faz algo semelhante e, na verdade, é semelhante.
‫Mas a diferença
‫é que só funciona para hastes protegidas, então faz sentido, certo?
‫Mas nossa nova função de middleware
‫estará em execução para cada solicitação em nosso site renderizado.
‫Vamos agora colocar isso em prática
‫aqui em nosso authController, e como é muito
‫semelhante à rota de proteção ou ao middleware,
‫irei copiar este aqui e depois apenas
‫fazer algumas modificações.
‫Então, vamos copiá-lo e colá-lo aqui
‫e este se chamará isLoggedIn.
‫Este middleware é realmente apenas para páginas renderizadas, então
‫o objetivo aqui não é proteger nenhuma rota, então
‫nunca haverá um erro neste middleware.
‫Na verdade, vamos escrever
‫isso rapidamente aqui apenas para páginas renderizadas, e não haverá erros.
‫Nosso token deve vir dos cookies e não
‫de um cabeçalho de
‫autorização porque, é claro, para páginas
‫processadas, não teremos o token no cabeçalho.
‫Então, novamente, para todo o nosso site renderizado,
‫o token sempre será enviado apenas
‫usando o cookie e nunca o cabeçalho de autorização.
‫Esse é apenas para a api.
‫E, na verdade, não precisa ser tão complexo quanto isso,
‫podemos simplesmente dizer para executar todo
‫o código que temos aqui se houver um token.
‫Ou, na verdade, se houver um cookie chamado jwt basicamente.
‫Então, vamos remover tudo isso e basicamente colocá-lo aqui.
‫Vou remover este e colocá-lo no final.
‫E então isso o formata novamente.
‫Agora, este token aqui não existe, é
‫simplesmente solicitar cookies. jwt.
‫Portanto, isso aqui verifica o token.
‫Em seguida, também precisamos verificar se o usuário ainda existe
‫e, portanto, tudo a partir
‫daqui será muito semelhante ao que tínhamos antes, com a
‫grande exceção de que não criaremos novos erros.
‫Vamos simplesmente passar para o próximo middleware,
‫mas nada acontecerá.
‫Em seguida, também queremos verificar
‫se o usuário alterou recentemente sua senha.
‫E de novo, claro, então nenhum erro.
‫Agora, aqui no final o que vai
‫acontecer se tudo isso aqui
‫estiver correto, então se o token for verificado, se o usuário
‫ainda existe, e se ele não mudou sua
‫senha, bem, nesse caso significa que lá é um usuário conectado.
‫Coloque isso aqui.
‫Portanto, há um usuário conectado.
‫O que queremos fazer
‫neste caso é tornar esse usuário acessível aos nossos modelos.
‫E como podemos fazer isso?
‫Bem, na verdade isso é algo que não fazíamos
‫antes e agora este é um bom lugar para aprender isso.
‫Podemos responder. locais e, em
‫seguida, coloque qualquer variável lá.
‫E nossos modelos de pug terão acesso a eles.
‫Então, se eu disser uma resposta. habitantes locais. usuário, então
‫dentro de um modelo haverá
‫uma variável chamada usuário.
‫Então, novamente, todo e qualquer modelo de
‫pug terá acesso à resposta. locais e tudo
‫o que colocarmos, haverá uma
‫variável dentro desses modelos.
‫Portanto, é um pouco como passar dados para um modelo usando
‫a função de renderização.
‫Este nós não precisamos mais, porque colocaremos este
‫usuário atual na resposta. habitantes locais.
‫E, claro, depois disso, o próximo middleware é chamado.
‫E também precisamos fazer isso fora desse If, então, caso
‫não haja cookie, então é
‫claro que o
‫próximo middleware será chamado
‫imediatamente, porque então é claro que não
‫há como realmente haver um usuário conectado.
‫Então, novamente, se não houver cookie, não
‫há usuário conectado.
‫Em seguida, não colocaremos o usuário
‫atual na resposta. habitantes locais.
‫Mas se houver um
‫cookie, bem, então passaremos por todas essas etapas de
‫verificação e, no final, se nenhum
‫deles chamar bem o próximo middleware
‫na pilha, isso significa que há um usuário conectado.
‫E, portanto, colocamos esse usuário em resposta. locais, e assim, temos acesso
‫a esse usuário em nossos modelos
‫de pug.
‫Por exemplo, bem aqui no cabeçalho, que é realmente
‫onde estará a navegação do usuário.
‫Então, vamos usar isso aqui
‫em um segundo, mas antes, é claro, também precisamos
‫daquele novo middleware que acabamos de criar.
‫E então vamos vir aqui para ver a rota
‫e, como eu estava dizendo
‫no início, queremos que esse middleware seja
‫aplicado a todas as rotas que temos aqui.
‫Então, fazemos isso um pouco como
‫fizemos antes com o middleware de proteção.
‫Então, basicamente, colocá-lo aqui antes de todas as outras rotas.
‫E então ele será colocado na pilha de
‫middleware para cada solicitação que chegar.
‫Então, roteador. use, authController. isLoggedIn.
‫E também vamos remover essa proteção da página
‫de detalhes do tour, porque
‫isso não faz nenhum sentido, na verdade.
‫Agora estamos prontos para usar isso.
‫Então, vamos chegar aqui ao nosso cabeçalho e usar uma condicional.
‫Agora lembre-se
‫de como eu disse antes que as condicionais no pug não
‫eram muito poderosas e muitas vezes usamos Java Script.
‫Mas, para o que queremos fazer
‫agora, eles são realmente bons o suficiente.
‫Portanto, tudo o que queremos fazer agora é dizer se é o usuário.
‫E para isso, eles funcionam bem para coisas muito simples, simplesmente para
‫testar se uma variável existe ou não.
‫Portanto, se houver um usuário, queremos exibir o que
‫temos aqui, então vamos colocá-lo lá.
‫Então, estou copiando
‫aqui,
‫comentando este código e aqui, dizemos mais.
‫Assim como em Java Script, podemos dizer if, else.
‫Então, aqui, na verdade, não quero minhas reservas, mas,
‫em vez disso, quero fazer logout.
‫Não tenho certeza por que isso está lá.
‫Portanto, ele é desconectado e também tem uma classe
‫especial que criei para torná-lo especial em CSS.
‫Então nav, el, e então com o modificador, logout, e vamos
‫também remover este atributo href de lá.
‫Então aqui, queremos o nome
‫do usuário, então usuário. nome e, na verdade, queremos apenas o primeiro nome.
‫Por exemplo, se eu criei uma
‫conta chamada Jonas Schmedtmann, assim, eu só quero exibir a
‫parte do Jonas aqui.
‫Portanto, vamos dividir o nome usando espaços e, em
‫seguida, exibir apenas o primeiro elemento
‫do array resultante.
‫Lembre-se de que aqui podemos simplesmente usar Java Script assim.
‫Divida-o por um espaço e, em seguida, apenas o primeiro elemento.
‫Então aqui é claro que também queremos aquela foto,
‫então essa é a imagem / usuários, lembre-se, eu acredito
‫pelo menos.
‫Então, vamos lá, usuários.
‫E então tudo o que vem de nosso banco de dados.
‫Então, usuário. foto, e então
‫também podemos dar-lhe um bom texto alternativo que é
‫muito importante para a acessibilidade.
‫Vamos acertar aqui.
‫Então, vamos testar isso
‫agora, porque estou realmente curioso para ver se funciona.
‫Assim como antes, deixe-me prosseguir e
‫excluir o cookie aqui.
‫Não tenho certeza do que este armazenamento local está fazendo aqui agora.
‫Vamos remover isso também, e este cookie também.
‫Portanto, vamos voltar ao login aqui e agora
‫terei que digitar novamente. teste de io, um, dois, três, quatro.
‫Vamos apenas copiar aqui, faça o login e, de
‫fato, estamos logados com sucesso.
‫Então, pegamos nosso cookie agora, vamos lá.
‫Mas é claro que nossa foto e nome de usuário
‫não foram exibidos imediatamente aqui, e isso é
‫claro porque isso só pode acontecer depois
‫de uma recarga,
‫porque é o expresso quem renderiza
‫essas páginas, então meio que precisa ser uma recarga.
‫Então, vamos implementar isso em um segundo,
‫mas por enquanto vamos ver se realmente estamos logados.
‫Então, vamos ver todos os tours aqui, e
‫agora temos esse erro aqui.
‫Tente recarregar aqui.
‫Bem, diz que não consegue encontrar no servidor.
‫O que acontece se recarregarmos aqui?
‫Bem, este funciona, e você vê que
‫na verdade nosso menu de usuário já está aqui.
‫Então, obtemos nosso botão e
‫imagem de logout e, claro, meu nome.
‫Excelente.
‫Agora, vamos tentar
‫basicamente fazer logout, excluindo este cookie.
‫E no próximo
‫vídeo iremos implementar esta funcionalidade exata.
‫E se recarregarmos agora, ele está de volta, ótimo!
‫Portanto, a função de middleware que acabamos de criar
‫está realmente fazendo seu trabalho.
‫Vamos apenas logar
‫como outra pessoa aqui, então digamos Laura, tudo bem.
‫Então Laura, e depois com a mesma
‫senha teste um, dois, três, quatro,
‫faça o login, está tudo bem, recarregue e pronto.
‫Então, isso está funcionando muito bem.
‫Só estou preocupado com esse
‫erro e, portanto, antes de fazermos qualquer
‫outra coisa, precisamos consertá-lo.
‫E como esse erro só começou
‫quando começamos a usar
‫esse novo middleware, vamos apenas ter certeza, ver
‫se há algo a ver com isso.
‫Então, se removermos esse
‫middleware, vamos ver se ele voltou a funcionar.
‫E sim, agora.
‫Então isso é um pouco estranho.
‫Vamos dar uma olhada
‫se podemos encontrar algum bug nesta função de middleware.
‫O que vejo aqui de
‫imediato é que sempre voltamos cada vez que ligamos, mas
‫aqui na próxima não.
‫Isso significa que caso entremos
‫neste bloco aqui, o próximo middleware será chamado, mas
‫novamente o próximo
‫middleware será chamado depois disso.
‫Portanto, provavelmente precisamos retornar este aqui também.
‫Mas certificamo-nos de que a próxima vez só será chamada uma vez.
‫Então, vamos tentar isso, coloque este aqui de
‫volta, salve-o e role para baixo aqui.
‫Sim, isso funciona agora.
‫Colocamos nosso
‫usuário logado aqui também agora, e claro, se excluirmos
‫o cookie basicamente desconectando o usuário, recarregar agora, então estaremos
‫de volta ao normal.
‫Em seguida, o que queremos corrigir aqui é realmente receber
‫um alerta aqui e
‫também recarregar a página após algum tempo.
‫Na verdade, não estou recarregando, mas sim enviando-o de
‫volta para a página inicial.
‫Então, agora aqui isso se foi e, como eu
‫disse antes, só vemos
‫esse menu de usuário quando recarregamos a página.
‫Então é isso que faremos agora automaticamente
‫em nosso código Java Script aqui.
‫Portanto, vamos primeiro nos livrar desses dados aqui.
‫Registrar dados confidenciais no console nunca é uma boa
‫ideia, e agora vamos fazer o
‫que acabei de dizer.
‫Portanto, aqui fazemos uma solicitação e, claro,
‫também mostrarei como podemos enviar dados diretamente de um
‫formulário htl para nosso aplicativo Note.
‫Existem duas maneiras.
‫Uma maneira é enviar
‫dados usando uma solicitação http, como fizemos aqui.
‫E outra é simplesmente usar diretamente um formulário html.
‫E esse também é muito importante e, um pouco
‫mais tarde na seção,
‫mostrarei a você como fazer esse também.
‫De qualquer forma, vamos agora mostrar aquele alerta e recarregar a página.
‫Vamos fazer isso apenas no caso de termos certeza de
‫que nossa chamada de API foi bem-sucedida.
‫Digamos resposta. dados e, portanto, esses dados são, na
‫verdade, os dados
‫que enviamos como nossa resposta do
‫dia e, a partir daí, podemos ler. status e verifique se é
‫igual a sucesso.
‫Portanto, lembre-se de como sempre definimos o
‫status para sucesso e agora podemos realmente usar isso
‫para realizar essa verificação.
‫Portanto, vamos usar um alerta simples
‫de Java Script, como este, e dizer conectado com sucesso.
‫Vamos nos livrar disso e também depois de um segundo
‫e meio carregar a primeira página.
‫Então, basicamente, a página inicial.
‫Então, janela. setTimeout, aqui a
‫função de retorno de chamada e, portanto,
‫para carregar outra página, dizemos localização. atribuir e, em seguida, simplesmente vamos para a
‫página inicial como esta.
‫E queremos fazer isso após 1.500 milissegundos,
‫então, um segundo e meio.
‫Então, caso
‫não tenhamos obtido sucesso, não
‫queremos registrar isso, mas sim alertá-lo.
‫Portanto, alerta, e novamente, esses
‫dados aqui são, na verdade, nossa resposta de dados.
‫Então, a partir daqui, vamos ler a propriedade da mensagem.
‫Isso deve funcionar, vamos recarregar aqui.
‫Ok, essa não é a pessoa certa.
‫Então, em vez de admin em natours. io, teste um,
‫dois, três, quatro, cinco,
‫para ver o erro primeiro.
‫E então você vê, e-mail
‫ou senha incorreta, e claro, isso é porque
‫nossa senha estava errada, então vamos nos livrar disso,
‫faça o login e logue-se com sucesso.
‫Agora vamos ver o que acontece.
‫Na verdade, ele não recarrega
‫automaticamente, porque antes que isso aconteça, precisamos
‫fechar esta janela.
‫Assim que fecharmos, devemos recarregar imediatamente.
‫E aí vamos nós.
‫Estamos agora na página
‫inicial e novamente com nosso menu de usuário correto renderizado aqui, perfeito.
‫Portanto, esta parte também está concluída e, agora, como
‫última etapa, quero melhorar esses alertas
‫que o usuário recebe.
‫Em vez de exibir esses alertas Java Script integrados.
‫Além disso, faremos aquele agrupamento de Java Script que
‫mencionei algumas vezes, mas deixaremos tudo isso
‫para o próximo vídeo porque
‫não quero sobrecarregar muito cada um deles.