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

Bug no botão entrar

estou com o seguinte problema! Estou na tela de login, quando preencho os dados e envio a requisição clicando no botão entrar preciso enviar novamente para entrar na tela do dashboard.

https://github.com/lazaroconceica/voll-web-e-server

3 respostas

Jose,

Verifica o código responsável pelo evento de clique no botão entrar. Certifique-se de que não há nenhum código redundante ou duplicado que esteja causando esse comportamento indesejado.

Além disso, verifique se a função responsável por lidar com a requisição de autenticação está sendo chamada corretamente. É possível que haja algum problema na lógica de redirecionamento após o login.

Recomendo também analisar o fluxo de autenticação do seu sistema. Certifique-se de que todas as etapas necessárias para autenticar o usuário e redirecioná-lo para a tela do dashboard estão sendo executadas corretamente.

Não sei em qual aula vc tá, então faz um code review junto com o repositório do curso https://github.com/alura-cursos/voll-parte-2/tree/aula05

Aproveita pra treinar pq fará muito isso na carreira.

Você chegou a encontar o erro? ainda não consegui encontrar

solução!

Oi, José! Tudo bem?

O problema que está acontecendo é: quando a requisição na página de login é feita, ela ocorre de forma assíncrona e o resto do código continua a executar. Então, no momento que você clica a primeira vez no login ele nem espera a requisição acontecer por completo, faz a verificação da resposta (que não existe ainda, portanto não faz o redirecionamento).

Pra contornar vamos ter que mexer um pouquinho código! Temos várias possíveis soluções, uma delas é usar o hook useEffect e colocar ele observando a resposta: toda vez que o estado de resposta muda, ele executa o código dentro do hook. Ai poderiamos colocar o navigate lá dentro. Dessa maneira:

 const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const usuario: ILogin = {
      email: email,
      senha: senha
    }
    try {
      cadastrarDados({ url: "auth/login", dados: usuario })
    } catch (erro) {
      erro && alert('Não foi possível fazer o login')
    }
  }

  useEffect(() => {
    if (resposta) {
      autenticaStore.login({ email: email, token: resposta });
      navigate("/dashboard");
    }
  }, [resposta]);

OBS: Isso dentro do arquivo index.tsx que está dentro de pages > Login

Muito obrigada por avisar do problema que está acontecendo no código! :)

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