如何将变量从 Express.js 后端发送到 React.js 前端？

Question

我正在尝试将我的变量“backEndResponse”及其值从我的 Express.js 后端发送到我的 React.js 前端。 我不太确定如何将变量从后端发送到前端。 我四处寻找，找不到任何好的资源。 我将不胜感激任何帮助。

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" })
    }
});

前端 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" />;
}

Answer 1

您将无法直接发送变量，而是以最能代表适合应用程序需求的数据的特定形状发送有效负载。 要在快速路由中发送响应负载，请使用如下内容：

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

如果您打算在响应中提供更多信息，例如 HTTP 标头因backEndResponse而异，那么您可以考虑：

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" })
  }
});

获取上述端点的组件类似于：

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>)
}

如果您发现需要跨多个组件重用该功能，则有机会将上述内容重构为自定义挂钩。

Answer 2

axios 请求是异步的 function，所以你应该这样做，

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