Eu tenho uma função chamada login que redireciona o usuário para a página principal se tudo estiver ok. Em seguida, na página principal, quero buscar algumas informações do usuário com useEffect usando o token que foi armazenado quando o usuário fez login, mas nada acontece. Somente quando eu atualizo a página, recebo os dados.
login function
export const login = ({ email, password, history }) => {
return async (dispatch) => {
try {
const response = await fetch("http://localhost:5000/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
}),
});
const data = await response.json();
if (data.status === 200) {
localStorage.setItem("userToken", data.user);
history.push("/");
} else {
dispatch(
setNotification({
variant: "error",
message: data.message,
})
);
}
} catch (e) {
console.log(e.message);
}
};
};
fetch user funtion
export const fetchUser = () => {
return async (dispatch) => {
try {
const response = await fetch("http://localhost:5000/userInfo", {
headers: {
"x-access-token": localStorage.getItem("userToken"),
},
});
const data = await response.json();
dispatch(setUser({
id: data.id,
fullname: data.fullname,
email: data.email
}))
} catch (error) {}
};
};
useEffect
export default function App() {
const isAuth = isLoggedIn();
const dispatch = useDispatch();
const cart = useSelector((state) => state.cart);
useEffect(() => {
dispatch(fetchUser());
}, []);
useEffect(() => {
if (!isAuth) {
return;
}
if (isInitial) {
isInitial = false;
return;
}
if (cart.changed) {
dispatch(sendCartData(cart));
}
}, [cart]);
return (
<React.Fragment>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/componentes" exact>
<Components />
</Route>
<Route path="/login" exact>
<Login />
</Route>
<Route path="/cadastro" exact>
<Register />
</Route>
<Route path="/produto/:nomeProduto" exact>
<SingleProduct />
</Route>
<Route path="/componente/suspensao" exact>
<Suspension />
</Route>
<Route path="/componente/quadro" exact>
<Frame />
</Route>
<Route path="/marca/:brand" exact>
<Brands />
</Route>
<Route path="/carrinho" exact>
<Cart />
</Route>
<Route path="/equipamentos" exact>
<Equipments />
</Route>
<Route path="/acessorios" exact>
<Accessories />
</Route>
<Route path="/casual" exact>
<Casual />
</Route>
</Switch>
</React.Fragment>
);
}
código do backend
module.exports.getCurrentUser = async (req, res) => {
const token = req.headers["x-access-token"];
try {
const verifyToken = jwt.verify(token, "123");
const user = await User.findOne({ email: verifyToken.email });
return res.json({
id: user._id,
fullname: user.fullname,
email: user.email
})
} catch (error) {}
};