使用 react-router 并通过 Passport.js 进行身份验证 - 可能吗？

Question

所以我正在开发一个包含 React、Express.js+Passport 和 Webpack 的项目。我理解通过 react-router 将所有内容推送到“主”React 组件的概念，然后让它散列为给定路由显示的内容。我认为这在这里会很好用。坦率地说，我是 React 新手。

我的担忧是：

1) 我可以/如何仍然使用 Passport 来验证我的路线吗？如果我正确理解 react-router，我将在我的 express app.js 文件中有一个路由，指向一个名为 <Application/> 的 React 组件。但是，Passport 需要router.get('/myroute', isAuthenticated, callback) 来检查会话。用 react-router 还可以吗？

2) 此外，如果可能的话，如何在 React 中将 Express 中的路由值传递到我的视图中？我知道在典型的视图中，如果我从我的路线通过，我可以使用<%= user %> 或{{user}}。这里可以吗？

Answer 1

从 API 路径中拆分视图渲染路径。毕竟，您可以将身份验证逻辑设置为 api 调用。

//Auth check middleware
function isAuth(req, res, next) {...}

//API routes
app.post("api/users/login", function() {...});
app.post("api/users/logout", function() {...});
app.get("api/purchases", isAuth, function() {...});
//and so on...

//Wild card view render route
app.use(function(req, res) {
  var router = Router.create({
    onAbort: function(options) {...},
    onError: function(error) {...},
    routes: //your react routes
    location: req.url
  });
  router.run(function(Handler) {
    res.set("Content-Type", "text/html");
    res.send(React.renderToString(<Handler/>));
  });
});

因此，您必须解决如何将视图中的服务器端渲染数据传递到客户端（选择同构数据传输技术）。

您还可以仅在客户端创建视图和重定向逻辑，并首先将 React 组件呈现为“等待”状态，该状态将在安装组件后在客户端上解决（通过 API 调用检查身份验证状态） .