Fórum Consumo de API em React #620835

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