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

Question

所以我正在做一个结合了 React、Express.js+Passport 和 Webpack 的项目。我理解通过 react-router 将所有内容推送到 'master' React 组件，然后让它散列为给定路由显示的内容的概念。我想这在这里会很管用。坦率地说，我是 React 的新手。

我的顾虑是：

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

2) 此外，如果可能的话，我如何将值从 Express 中的路由传递到我在 React 中的视图中？我知道在典型的视图中，如果我从我的路由中传递它，我可以使用 <%= 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/>));
  });
});

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

您还可以仅在客户端创建视图和重定向逻辑，并首先以 "awaiting" 状态呈现反应组件，该状态将在安装组件后在客户端解析（通过检查身份验证状态API 个电话）。

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

Using react-router and express with authentication via Passport.js - possible?

javascript

node.js

express

reactjs

passport.js