Estoy tratando de enviar mi variable 'backEndResponse' con su valor desde mi backend Express.js a mi React.js Frontend. No estoy muy seguro de cómo enviar una variable desde el backend al frontend. He buscado y no puedo encontrar ningún buen recurso. Apreciaría cualquier ayuda.
Servidor Express.js
function getcookie(req) { var authCookie = req.headers.cookie; if (authCookie = req.headers.cookie) { try { return authCookie .split('; ') .find(row => row.startsWith('Auth=')) .split('=')[1]; } finally { if (authCookie = result) { backEndResponse = true console.log(backEndResponse); console.log(result); } else { backEndResponse = false console.log(backEndResponse); console.log(result); } } } else { } } app.get('/auth', (req, res) => { getcookie(req) if (backEndResponse) { res.json(backEndResponse); // OR json({ message: "Authorised" }) } else { res.json(backEndResponse); // OR json({ message: "Unauthorised" }) } });Interfaz React.js
const useAuth = () => { const [data, setData] = useState(); useEffect(() => { const fetchAuthData = () => { const result = axios('http://localhost:5000/auth'); console.log(result) setData(result.data); }; fetchAuthData() }, []); // Logic to check if backEndResponse is true or false if (data) { const authorized = {loggedIn: true} return authorized && authorized.loggedIn; } else { const authorized = {loggedIn: false} return authorized && authorized.loggedIn; } } const ProtectedRoutes = () => { const isAuth = useAuth(); return isAuth ? <Outlet/> : <Navigate to="/login" />; }No podrá enviar una variable directamente, sino que enviará una carga útil en una determinada forma que mejor represente los datos adecuados para las necesidades de las aplicaciones. Para enviar una carga útil de respuesta en una ruta expresa, use algo como lo siguiente:
app.get('/auth', (req, res) => { // do some logic for `backEndResponse`... res.json(backEndResponse); }); Si tenía la intención de proporcionar más información en la respuesta, como encabezados HTTP que difieren según backEndResponse , entonces podría considerar:
app.get('/auth', (req, res) => { // do some logic for `backEndResponse`... // send HTTP Ok if true, otherwise Bad Request // consider handling 400 and/or 500 errors too if (backEndResponse) { res.status(200).json(true); // OR json({ message: "Authorised" }) } else { res.status(401).json(false); // OR json({ message: "Unauthorised" }) } });Un componente que obtenga el punto final anterior sería similar a:
const MyComponent = () => { const [data, setData] = useState(); useEffect(() => { const fetchAuthData = async () => { const result = await axios('http://localhost:5000/auth'); setData(result.data); // true/false OR { message: "Authorised" } }; fetchAuthData(); }, []); // display payload return (<div>{JSON.stringify(data)}</div>) }Existe la oportunidad de refactorizar lo anterior en un enlace personalizado si encuentra la necesidad de reutilizar la funcionalidad en múltiples componentes.
La solicitud de axios es una función asíncrona, por lo que debería hacer eso,
const useAuth = async () => { try { const res = await axios.get('http://localhost:5000/auth', { withCredentials: true }) return true } catch (e) { return false } };