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.
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.
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
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! :)