Solucionado (ver solução)
Solucionado
(ver solução)
21
respostas

Teste: após remover cookie/sessão, ao clicar em Remover (livro) não está redirecionando para a página de login

Olá pessoal!

Após implementar as funcionalidades desta aula e após autenticação /login, acessei a rota /livros, realizei um teste onde removi o cookie relativo à sessão (através das ferramentas do desenvolvedor / dev tools do navegador) (procedimento similar ao que o instrutor realizou - final do vídeo - na task 06 da aula 04), e tentei remover um livro (opção Remover da rota /livros).

Com isso, o livro desapareceu da página e não houve o redirecionamento para a rota/página de login, conforme configuração no arquivo livro-rotas.js (linha com o código resp.redirect(BaseControlador.rotas().login)):

    // src/app/rotas/livro-rotas.js

    // código omitido.

    const BaseControlador = require('../controladores/base-controlador');

    module.exports = (app) => {
        const rotasLivro = LivroControlador.rotas();

        app.use(rotasLivro.autenticadas, function(req, resp, next) {
            if (req.isAuthenticated()) {
                next();
            } else {
                resp.redirect(BaseControlador.rotas().login); 
            }
        });

        // demais rotas omitidas.
    };

Posteriormente, descobri que o livro não era removido do banco de dados, mas apenas desaparecia da página do navegador, então fiz a seguinte modificação, para a remoção deixar de acontecer nesta página:

  // arquivo remove-livro.js

  // código anterior omitido

  // DEPOIS da modificação
  if (elementoClicado.dataset.type == 'remocao') {
      let livroId = elementoClicado.dataset.ref;
      fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
          .then(resposta => {
            if (resposta.ok) { // MODIFICACAO (inclusão deste if)
              let tr = elementoClicado.closest(`#livro_${livroId}`);
              tr.remove();
            }
          })
          .catch(erro => console.log(erro));
  }
  • Porém, porque não está acontecendo o redirecionamento para a página de login (linha resp.redirect(BaseControlador.rotas().login) no código mais acima )? Como efetivamente fazer este redirecionamento?

Obs: se eu remover o cookie e clicar em editar, o redirecionamento acontece normalmente para a página de login (/login), porém com a opção Remover esse redirecionamento não acontece.

Obs2: caso necessitem do projeto completo para verificação, favor fazer o download do projeto disponibilizado na task 01 da aula 05 (equivalente à este link), e favor também adicionar a este projeto o código disponibilizado na transcrição da task 01 desta aula 05.

Obs2 (update): caso necessitem do projeto completo para verificação, favor fazer o download do projeto disponibilizado na task 06 da aula 05 (equivale à este link).

Aguardo, desde já obrigado!

Atenciosamente.

21 respostas

Fala ai Elías, tudo bem? Olhando o seu código referente a remoção do livro:

fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
          .then(resposta => {
            if (resposta.ok) { // MODIFICACAO (inclusão deste if)
              let tr = elementoClicado.closest(`#livro_${livroId}`);
              tr.remove();
            }
          })
          .catch(erro => console.log(erro));

Não possuí nenhuma condição ou regra para que seja feito o redirecionamento.

Acho que você vai precisar verificar o status da resposta para verificar se o usuário está logado ou não e realizar o redirecionamento manualmente.

Espero ter ajudado.

Olá Matheus, obrigado pelo retorno.

No código que faz a remoção realmente não tem o redirecionamento, porque o instrutor definiu a verificação da autenticação e redirecionamento em outro arquivo, que é o outro código que incluí na mesma mensagem que você respondeu.

Aguardo, desde já obrigado!

Atenciosamente.

O redirect que ele fez foi para renderizações e requisições feitas no back-end.

No seu caso, ao utilizar o fetch você está fazendo a requisição pelo client, aquele redirect não vai funcionar da maneira que vocês querem.

Abraços e bons estudos.

Olá Matheus! Tudo bem?

  1. Não entendi, assim como o fetch, as requisições/urls do "navegador em si" também não são requisições do client? Qual a diferença?

  2. Além disso, testando o código, tanto a rota do fetch quanto outras rotas que exigem sessão passam pelo mesmo código de redirect (quando não há sessão), só que no caso do fetch, apesar de passar pelo redirect, "parece" que o código não é executado, se puder explicar mais isso... :D

  3. Se aquele redirect não vai funcionar, como ficaria o código para funcionar? Não teria que incluir este código no curso?

Aguardo, desde já obrigado!

Atenciosamente!

Fala ai Elías, tudo bem? Vamos lá:

Não entendi, assim como o fetch, as requisições/urls do "navegador em si" também não são requisições do client? Qual a diferença?

O fetch vai executar requisições no lado do cliente (browser), caso o direcionamento precise ser feito, você vai precisar verificar o statusCode da requisição para depois redirecionar o usuário. Se fosse uma requisição no lado do server, o servidor em si já ia devolver para o navegador a URL de redirecionamento.

Além disso, testando o código, tanto a rota do fetch quanto outras rotas que exigem sessão passam pelo mesmo código de redirect (quando não há sessão), só que no caso do fetch, apesar de passar pelo redirect, "parece" que o código não é executado, se puder explicar mais isso... :D

Pois, a resposta anterior se aplica para essa.

Se aquele redirect não vai funcionar, como ficaria o código para funcionar? Não teria que incluir este código no curso?

Sim, teria, acho que talvez passou despercebido pelo instrutor.

Espero ter ajudado.

Olá Matheus! Tudo certo, e contigo?

O fetch vai executar requisições no lado do cliente (browser), caso o direcionamento precise ser feito, você vai precisar verificar o statusCode da requisição para depois redirecionar o usuário. Se fosse uma requisição no lado do server, o servidor em si já ia devolver para o navegador a URL de redirecionamento.

  • Desculpa, mas ainda não entendi porque o fetch(`http://localhost:3000/livros/${livroId}`.... é uma requisição do lado do cliente, e as demais (por ex a edição, ou seja, /livros/form/:id são requisições do lado do servidor, uma vez que tanto o fetch quanto as demais requisições começam no lado do cliente/navegador, mas acionam rotas no lado do servidor, e também acionam o mesmo código de verificação de autenticação do servidor. Novamente, se puder me explicar de outra forma, porque tanto o fetch quanto as demais requisições acionam rotas no servidor...

Sim, teria, acho que talvez passou despercebido pelo instrutor.

  • Então você poderia explicar este tópico para o instrutor Gabriel e pedir para ele adicionar este código no curso? Se o instrutor não tiver disponibilidade no momento para isso, poderia também pedir para ele disponibilizar o código aqui, neste tópico?

Aguardo, desde já obrigado!

Atenciosamente.

Fala ai Elías, tudo bem? Vamos lá:

Novamente, se puder me explicar de outra forma, porque tanto o fetch quanto as demais requisições acionam rotas no servidor...

Acho que minha explicação não favoreceu mesmo, sim, você tem razão, as duas requisições começam no lado do cliente.

O X da questão é como elas irão ser tratadas após terem uma resposta, ao utilizar o fetch o tratamento será feito através do JavaScript, ou seja, no lado do cliente.

Porém, quando a requisição é tratada pelo servidor, de acordo com o código do HTTP retornado o navegador consegue saber o que precisa fazer.

Exemplo:

Uma requisição feita com fetch que retorna o código 302 não será muito relevante para o JavaScript, para ele é como se fosse um erro, pois o mesmo foi diferente de 2xx.

Porém, caso a requisição seja retornada tratada pelo servidor e não feita de forma programática, quando ela retornar o código 302 o próprio navegador sabe que trata-se de um redirecionamento.

Espero ter ajudado.

Olá Matheus, tudo certo, e contigo, tudo bem?

Ajudou sim, ficou mais claro agora.

Só ficou faltando um dos tópicos da mensagem anterior:

  • Então você poderia explicar este tópico para o instrutor Gabriel e pedir para ele adicionar este código no curso? Se o instrutor não tiver disponibilidade no momento para isso, poderia pedir para ele disponibilizar o código aqui, neste tópico?

Aguardo, desde já obrigado!

Atenciosamente.

Opa, vou falar com ele.

Abraços e bons estudos.

Olá Matheus!

Você chegou a falar com o instrutor Gabriel, o que ele disse?

Aguardo, desde já obrigado!

Atenciosamente.

Não falei, está bem corrido as coisas por aqui.

Abraços e bons estudos.

Olá Matheus,

Então você poderia falar com ele, ou pedir para ele dar uma olhada neste tópico, ou pelo menos me passar uma previsão de (até) quando você conseguirá falar com ele?

Aguardo, desde já obrigado.

Atenciosamente.

Você ainda está com problemas?

Abraços

Olá Matheus,

Se o meu último questionamento foi há 2 dias atrás (após 3 semanas sem retorno), tudo leva a crer que eu ainda tenha a dúvida...

Aguardo o retorno da dúvida em si, desde já obrigado.

Atenciosamente.

Faz o seguinte, compartilha o projeto completo comigo, vou simular o fluxo por aqui para visualizar o problema.

Fico no aguardo.

Olá Matheus,

Pode ser o projeto final do próprio curso, que eu coloquei na primeira mensagem deste tópico, que você encontra aqui ou aqui.

Aguardo, desde já obrigado!

Atenciosamente.

Boa noite, Elías! Como vai?

Estava passando no fórum hoje e vi essa thread enorme aqui. Então resolvi entrar pra ver o que estava acontecendo. Ao que tudo indica realmente eu esqueci de considerar esse caso de redirecionamento no caso da remoção do livro se o usuário remover o cookie.

Essa semana eu estou ocupado dando aulas presenciais então não terei como ver isso. Mas na semana que vem darei uma olhada e, se preciso for, adicionarei uma atividade para saber mais no curso tratando sobre o assunto.

Agradeço a sua colaboração! É com participações como essa sua que fazemos da Alura uma plataforma cada vez melhor! Continue assim!

Grande abraço e bons estudos, meu aluno!

Olá Gabriel! Tudo certo e contigo?

Ao que tudo indica realmente eu esqueci de considerar esse caso de redirecionamento no caso da remoção do livro se o usuário remover o cookie.

Não tem problema esquecer, eu apenas queria entender como ficaria o código para esta situação...

Essa semana eu estou ocupado dando aulas presenciais então não terei como ver isso. Mas na semana que vem darei uma olhada e, se preciso for, adicionarei uma atividade para saber mais no curso tratando sobre o assunto.

Show, então aguardarei teu retorno na próxima semana. Se você não tiver muito tempo, pode ser só o código aqui neste tópico mesmo e, posteriormente, com tempo, você resolve melhor como considerar isso no curso em si.

Obrigado, também agradeço o teu retorno!

Atenciosamente.

solução!

Fala ai Elías, tudo bem? Desculpa eu não tinha visto que no inicio da dúvida havia compartilha o link do projeto, acabei pedindo sem precisar.

Mas, eu fiz o teste aqui, segue algumas alterações referente ao código para remover o livro:

let tabelaLivros = document.querySelector('#livros');
tabelaLivros.addEventListener('click', (evento) => {
    let elementoClicado = evento.target;

    if (elementoClicado.dataset.type == 'remocao') {
        let livroId = elementoClicado.dataset.ref;
        fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
            .then(resposta => {
                if (resposta.status === 404) {
                    window.location = '/login'
                }
                if (resposta.ok) {
                    let tr = elementoClicado.closest(`#livro_${livroId}`);
                    tr.remove();
                }
            })
            .catch(erro => console.log(erro));
    }
});

Repare que eu adicionei dois if, sendo:

  • if (resposta.status === 404): Aqui eu verifiquei se o cookie foi removido, pois, se você remover o cookie e tentar remover o livro vai dar erro 404.
    • if (resposta.ok): Aqui estou verificando se ocorreu tudo certo com a requisição, se sim, ele vai remover o livro.
    • window.location = '/login': Aqui estou redirecionando para a tela de login, ou seja, caso o cookie seja removido, vai dar erro 404 então o usuário será redirecionado para a tela de login.

Obs: O ideal não era verificar pelo código 404, o correto seria a API retornar 401 para tentativa de remoção dos livros após limpar o cookie. Mas, nesse momento será o suficiente.

Espero ter ajudado.

Olá Matheus,

Tranquilo, sem problemas.

Aham, tanto o código de erro quanto location fixas não são a melhor forma, mas contornam a situação de não haver nenhuma iteração com usuário e até o comportamento anteriormente inadequado (o usuário clicava em remover, e só removia do layout, não removia do banco/back-end).

Ajudou sim, obrigado!

Atenciosamente.

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software