How do I send a variable from Express.js backend to React.js frontend?-CodePudding

I am trying to send my variable 'backEndResponse' with its value from my Express.js backend to my React.js Frontend. I am not quite sure how to send a variable from the backend to the frontend. I have searched around and can't find any good resources. I would appreciate any help.

Express.js Backend

 function getcookie(req) {
        var 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);
            }
        }
    }
    
    app.get('/auth', (req, res) => {
        backEndResponse
    });

Frontend React.js

let backEndResponse = null

axios.get('http://localhost:5000/auth', { withCredentials: true }).then((res) => {
        // backEndResponse
    })

const useAuth = () => {
    if (backEndResponse) {
        const authorized = {loggedIn: true}
        return authorized && authorized.loggedIn;
    } else {
        const authorized = {loggedIn: false}
        return authorized && authorized.loggedIn;
    }
};

CodePudding user response：

axios request is async function, so you should do like that,

const useAuth = async () => {
  try {
    const res = await axios.get('http://localhost:5000/auth', {
      withCredentials: true
    })
    return true
  } catch (e) {
    return false
  }
};

CodePudding user response：

You won't be able to send a variable directly, rather you will send a payload in a certain shape that best represents the data suited to the applications needs. To send a response payload in an express route use something like the following:

app.get('/auth', (req, res) => {
  // do some logic for `backEndResponse`...

  // send HTTP Ok if true, otherwise Bad Request
  // consider handling 500 errors too
  if (backEndResponse) {
    res.status(200).json({ message: "Success" });
  } else {
    res.status(400).json({ message: "Fail" });
  }
});

A component fetching the above endpoint would be similar to:

const MyComponent = () => {
  const [data, setData] = useState();

  useEffect(() => {
    const fetchAuthData = async () => {
      const result = await axios('http://localhost:5000/auth');

      setData(result.data); // { message: "Success" }
    };

    fetchAuthData();
  }, []);

  // display payload
  return (<div>{data.message}</div>)
}

There is an opportunity to refactor the above into a custom hook should you find the need to reuse the functionality across multiple components.