Consumo de API em React
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:
Pessoal qualquer ideia de fazer diferente para ajudar eu estou pegando como aprendizado, estou iniciando na programação e espero aprender muito ainda.
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
Curtidas 0