Consumo de API em React

12/12/2023

Pessoal bom dia,

Estou fazendo um projeto full stack com o back end em nodejs e front em react ts, estou tendo dificuldade em uma situa��o que � a seguinte:

Minhas rotas tem como padr�o o header e o footer, mudando somente o conte�do do main dentro dela quando se muda de p�gina, para autentica��o fiz uma chamada na api onde ela me tr�s um objeto com o seguinte conte�do:
{
auth: true,
token: um token aleat�rio jtw
}

Atrav�s desse auth true consigo saber se meu cliente est� autenticado, pois, ele valida de acordo com o e-mail e a senha de dentro do banco de dados. Meu componente do header n�o tem essa resposta, gostaria de quando o cliente estivesse autorizado e logado ao inv�s de aparecer "Entrar" no canto superior direito era para aparecer "Bem vindo $", algu�m consegue me auxiliar falando sobre alguma ideia do que posso implementar, se context ficaria interessante chamando a API ou mandando esse estado para o header, segue o c�digo da chamada de API:

const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      const response = await fetch(`http://localhost:3001/login/$`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          email: email,
          password: password 
        }),
      });
  
      if (response.ok) {
        const data = await response.json();
        localStorage.setItem('token', data.token);
        console.log(data);
        if (data.auth === true) {
          const { from } = location.state || { from: { pathname: '/login' } };
          window.location.replace(from.pathname);
          console.log('autenticado')
        } else {
          console.log('Credenciais inv�lidas');
        }
      }
    } catch (error) {
      console.error('Erro ao fazer login:', error);
    }
  };

Pessoal qualquer ideia de fazer diferente para ajudar eu estou pegando como aprendizado, estou iniciando na programa��o e espero aprender muito ainda.

Jo�o Victor

Curtir t�pico + 0

Responder