Question

我目前有一个Express后端，该后端为用户提供登录页面，这是React App的一部分。应用程序页面上有一个按钮，可引导用户通过Google的O-Auth流程，最终返回用户信息，例如：

router.get("/google/redirect", passport.authenticate('google'), (req,res) => { // Returns user information from google...
    res.redirect("/dashboard");
    // req.user <–– My user information is here...
});

在我的应用程序的主server.js文件中，我有一条app.get路由在中间件下面等待我的身份验证，以准备在我的React.js编译索引中提供服务，

app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, "index.html"));
});

该GET路由服务于我的React.js文件，该文件包含基于我的Redux状态的“公共”和“私有”路由。 React文件（在被编译为上述路由所提供的index.html / javascript捆绑包之前）在编译之前如下所示：

const store = configureStore();
const jsx = (
  <Provider store={store}>
    <AppRouter />
  </Provider>
);
const renderApp = () => {
    ReactDOM.render(jsx, document.getElementById('app'));
    hasRendered = true;
};

renderApp();

我想做的就是以某种方式将数据从Express后端“发送”到Redux状态。这样，当用户登录时，Redux的“ isAuthenticated”状态会更改，然后当我被路由到专用的“ / dashboard”路由时。

如何将此MongoDB数据发送到我的Redux存储，然后将用户重新路由到适当的页面（\dashboard）？还是有一种更好的方法来呈现初始的React状态，以便我可以显示一个Login屏幕，然后在用户登录后，重定向它们并根据来自后端的信息更改Redux状态？

Answer 1

我看到您的主要问题是如何从MongoDB检索数据到React，然后更改状态。

它将像来自客户端->服务器的任何其他请求一样完成。

现在如何从Mongodb请求数据取决于它的实现：

如果将MongoDb作为Mongoose之类的节点程序包运行，那么您将通过React-> Express Server进行调用，该服务将为数据库中的数据提供服务。

React-> Express的请求如下所示：

反应代码：

 callAPI(){
    fetch("http://localhost:9000/testAPI")
      .then(res=>res.text())
      .then(res=> this.setState({apiResponse :res}))
      .catch(err=> err);
  }

 componentDidMount(){
    //this can be any event. This is just an example
    this.callAPI();
  }

然后Express必须将您要查找的数据路由到/ testAPI。

表达testAPI.js

express = require('express');

router = express.Router();

router.get('/', function(req,res, next) {
    res.send('API is working perfectly.');
});

module.exports = router;

让我知道这是否回答了您的问题。

带有React Router的后端API

1 个答案: