‫Narrador: Bem-vindo de volta.
‫Portanto, neste vídeo, você aprenderá uma maneira super segura
‫de desconectar usuários.
‫Portanto, até este ponto, quando queríamos excluir um usuário,
‫simplesmente excluiríamos o cookie de nosso navegador.
‫Direito?
‫Então, algo assim e,
‫em seguida, remova-o.
‫No entanto, o fato é que criamos esse
‫cookie como um cookie apenas http.
‫Lembre-se disso,
‫e isso significa que não podemos manipular esse
‫cookie de nenhuma forma em nosso navegador.
‫Portanto, não podemos
‫alterá-lo e também não podemos excluí-lo.
‫Então, vamos rapidamente dar uma olhada naquele lugar no código onde
‫fizemos isso.
‫Então, no controlador
‫de autenticação lá onde nós realmente criamos aquele cookie,
‫então ele está bem aqui.
‫E, novamente, lembre-se de que isso significa que
‫não podemos manipular o cookie no navegador de nenhuma forma.
‫Nem mesmo destruí-lo.
‫Portanto, exclua-o.
‫Então, se quisermos continuar usando essa forma super segura
‫de armazenamento de cookies,
‫como poderemos realmente fazer logout de usuários em
‫nosso site?
‫Porque geralmente com a autenticação JWT, apenas excluímos
‫o cookie ou
‫o token do armazenamento local.
‫Mas bem, de novo, isso não é possível ao usá-lo dessa forma.
‫E então o que vamos fazer em vez disso
‫é criar uma rota de logout muito simples que simplesmente enviará de
‫volta um novo cookie com exatamente o mesmo
‫nome, mas sem o token.
‫E então isso substituirá o cookie atual que
‫temos no navegador por um que tenha o mesmo
‫nome, mas nenhum token.
‫E então, quando esse cookie for enviado
‫junto com a próxima solicitação, não seremos capazes de
‫identificar o usuário como estando logado.
‫E isso irá efetivamente desconectar o usuário.
‫E também íamos dar a
‫este cookie um tempo de expiração muito curto.
‫E isso será efetivamente um pouco como
‫excluir o
‫cookie, mas com uma solução alternativa muito inteligente como essa, certo?
‫Então, vamos fazer isso aqui, logo após o login.
‫Então, novamente, quando estamos fazendo autenticação baseada em tokens, normalmente
‫nunca precisamos de um ponto de
‫extremidade como este, mas quando queremos enviar um cookie super seguro como fazemos bem,
‫temos que fazer assim.
‫Então, novamente, na resposta definimos o cookie, e o segredo
‫é dar a ele exatamente o mesmo nome.
‫Assim como mencionei
‫antes, e isso é jwt.
‫Assim como aqui, ok?
‫Mas aqui, enviamos o token,
‫mas agora enviaremos apenas um texto fictício.
‫Digamos que você esteja desconectado e, em
‫seguida, as opções de cookies.
‫Portanto, uma data de validade, como em 10
‫segundos a partir de agora.
‫Então, vamos criar uma nova data
‫com
‫base na data. agora
‫mais 10 segundos.
‫Então, isso é 10 vezes 1000.
‫E também irei configurá-lo, novamente, apenas para http.
‫Definido como verdadeiro,
‫mas não precisamos defini-lo como seguro, porque,
‫neste caso, não há dados confidenciais
‫que alguém possa obter.
‫Aqui está faltando a vírgula,
‫e agora tudo o que precisamos fazer é enviar esta resposta de volta.
‫Então, status 200 e vamos simplesmente
‫marcá-lo como sucesso aqui.
‫Então, em nossa rota, precisamos adicioná-lo, é claro, também na
‫rota do usuário, então vamos
‫fazer isso aqui mesmo após o
‫login, mas este será na verdade uma solicitação de
‫obtenção porque não enviaremos nenhum
‫dado junto com
‫a solicitação, não alteramos
‫nada, na verdade simplesmente obtemos um cookie.
‫E então esse nome realmente faz sentido.
‫Ou esse verbo realmente faz sentido.
‫Então, saia e
‫agora estamos prontos para realmente atingir esse caminho, assim como
‫fizemos aqui com nossa biblioteca Axios.
‫Então exporte, saia ou
‫const primeiro e
‫assim como antes
‫de usarmos um bloco
‫try catch que, neste
‫caso, não é tão importante porque não
‫pode realmente haver um erro durante o logout,
‫certo?
‫Mas enfim, para o caso, por exemplo, de
‫não termos conexão com a internet.
‫Nesse caso, obteremos um erro legal e vamos
‫fazer isso primeiro aqui.
‫Portanto, mostre o
‫erro
‫de logout, tente novamente.
‫Tudo bem, mas isso aqui, como eu disse,
‫não deve acontecer com tanta frequência.
‫Então, em vez
‫disso,
‫vamos fazer nosso pedido com Axios.
‫Tudo bem.
‫E então o método desta vez
‫é get e a
‫URL é semelhante ao que
‫temos aqui, mas
‫é logout.
‫E então, na próxima etapa, vamos recarregar a página.
‫Então é isso que sempre
‫fazemos manualmente quando apagamos um cookie, certo?
‫E então aqui é claro que precisamos fazer isso de forma programática.
‫Direito?
‫E precisamos fazer isso
‫aqui porque, como essa é uma solicitação Ajax, não podemos fazer no
‫back end.
‫Portanto, não podemos fazer isso com expresso.
‫E então precisamos, é claro, fazer isso manualmente aqui.
‫Direito?
‫Caso contrário, seríamos tecnicamente desconectados, mas nosso
‫menu de usuário ainda refletiria e
‫mostraria que estamos conectados.
‫E então, é claro, nós simplesmente precisamos recarregar a
‫página que enviaria o cookie inválido basicamente
‫para o
‫servidor, de modo que aquele que acabamos de
‫receber sem um token e não
‫estivermos mais logados e, portanto, nosso menu de usuário desaparecer ok?
‫Então, vamos fazer isso se houver sucesso.
‫Assim como antes, descanse. dados. status.
‫Nesse ponto final, também enviamos de volta o status definido
‫para sucesso e, para
‫isso, podemos testar mais uma vez aqui.
‫E então, se este
‫for o caso, nós nem mesmo precisamos
‫disso, neste caso, a localização da viúva. recarregar.
‫E então algo realmente importante
‫é que realmente precisamos defini-lo como verdadeiro
‫aqui, e isso forçará uma recarga do
‫servidor e não do cache do navegador, certo?
‫Agora, é claro, precisamos marcá-lo aqui como
‫assíncrono e tudo bem.
‫Portanto, esta parte aqui é realmente importante novamente
‫porque, caso contrário, pode simplesmente carregar a mesma
‫página do
‫cache que ainda teria nosso menu de usuário lá em cima.
‫Mas é claro que não é
‫isso que queremos, realmente queremos uma nova página descendo do servidor.
‫Tudo bem?
‫Portanto, temos nossa função de
‫logout e agora no índice, basicamente precisamos acioná-la assim que
‫clicarmos nesse botão.
‫Então, vamos criar um elemento aqui primeiro.
‫Portanto, o documento
‫do botão de logout. querySelector e
‫lembre-se de como criamos esse elemento.
‫Então está aqui.
‫Então, este aqui.
‫Portanto, estamos selecionando agora por esta classe.
‫Tudo bem, claro que poderíamos usar uma identificação também aqui,
‫mas isso não é muito importante, certo?
‫O que importa aqui agora é dizer se
‫há um botão
‫de logout e, em seguida, logOutButton. addEventListener.
‫Queremos que ele ouça todos os eventos
‫que acontecem naquele botão sempre que houver um clique.
‫Então, estamos esperando pelo evento
‫click e quando isso acontece, chamamos a função log
‫out que ainda não importamos, então
‫vamos adicionar isso aqui.
‫Portanto, faça login e logout.
‫Tudo bem, e deveria ser isso.
‫Então, vamos testar agora.
‫Recarregue-o apenas para ter certeza, e
‫agora Oh,
‫temos um erro de logout.
‫Tente novamente, por que isso.
‫Bem, vamos tentar dar uma olhada melhor no erro.
‫Mas o importante é que na verdade tudo isso
‫já está funcionando.
‫Portanto, este ouvinte de evento
‫aqui e também esta função de logout estão fazendo seu trabalho.
‫Então, vamos
‫apenas fazer o console. erro de log. resposta.
‫Então, vamos recarregar isso aqui.
‫Deve acontecer automaticamente.
‫Tudo bem.
‫Portanto, tente novamente.
‫Então, o que está acontecendo
‫aqui, então a conversão para o id do objeto falhou para o logout do valor.
‫Então isso é muito estranho.
‫Dê uma olhada nessa rota.
‫Oh, claro,
‫isso é um erro sério.
‫Deve estar logado, é claro.
‫Ok, mas esse tipo de curso, novamente, acontece o tempo todo.
‫Então, vamos recarregar isso aqui.
‫E tente novamente.
‫E agora estamos obtendo algo aqui.
‫Agora está parado e com
‫erro, mas isso não é problema nenhum.
‫Portanto, temos um erro de token da
‫web JSON porque nosso token da web JSON está malformado.
‫E isso está vindo,
‫como você pode ver, do middleware conectado.
‫E então podemos meio que adivinhar o porquê disso, certo?
‫Então, vamos voltar a adicionar nosso controlador de autenticação.
‫E o token da web
‫JSON que basicamente estamos enviando agora está aqui, certo?
‫Então, isso foi desconectado.
‫E aqui
‫no isLoggedIn que basicamente irá disparar um erro.
‫Então, aqui no token da web JSON, verifique, certo?
‫E como toda a função aqui está
‫envolvida neste catchASync, ela enviará esse erro para todos os middlewares
‫de tratamento de erros globais.
‫E isso vai gerar esse erro que nesse caso
‫a gente não quer, lembra?
‫Portanto, neste
‫middleware isLoggedIn não queremos causar nenhum erro.
‫E então, vamos corrigir
‫isso e removeremos este catchASync daqui
‫porque não queremos detectar nenhum erro Async.
‫Em vez disso, o que queremos fazer
‫é basicamente capturá-los localmente
‫e, se houver um erro, basta dizer próximo.
‫Assim, ok?
‫Então vamos fazer isso.
‫Então, envolva tudo isso em uma tentativa.
‫Feche aqui.
‫Bem, algo mais errado.
‫Ah! Provavelmente estamos perdendo o bloco catch.
‫E então, neste caso, queremos ir para o próximo middleware.
‫Basicamente, dizendo que não há nenhum usuário conectado.
‫Direito?
‫Então, vamos testar novamente.
‫Volte, oh, e agora não estamos mais logados.
‫Portanto, faça login.
‫Isso foi um sucesso.
‫E agora vamos sair imediatamente.
‫Ah! Lindo! Agora funciona corretamente.
‫E desta vez o que aconteceu aqui é
‫que, obviamente, essa verificação falhou porque
‫aquele token da web JSON não estava em um formato
‫que esse algoritmo esperava.
‫Mas o que aconteceu neste caso é que
‫o erro não foi detectado usando nossa
‫função catchASync, mas em vez disso, foi direto para detectar o
‫erro, que então foi direto para o próximo middleware.
‫Tudo bem, ótimo!
‫Portanto, se agora dermos uma olhada em
‫nossos cookies, temos um em uso que provavelmente já expirou.
‫Como você pode ver, ela tem apenas 10 segundos de vida e,
‫se eu recarregar esta página agora, ela
‫já deve ter acabado.
‫Portanto, você não vê nenhum cookie em uso.
‫Ok, e isso é tudo o que
‫precisamos fazer para desconectar o usuário do nosso site.