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

Question

所以我正在开发一个包含React,Express.js + Passport和Webpack的项目.我理解通过react-router将所有内容推送到"主"React组件的概念,然后让它散列出给定路由显示的内容.我认为这在这里会很有用.为了提前,我是React的新手.

我担心的是:

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

2)此外,如果可以,如何在Express中将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/>));
  });
});

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

您还可以仅在客户端创建视图和重定向逻辑,并首先将响应组件呈现为"等待"状态,该状态将在安装组件后在客户端上解析(通过API调用检查身份验证状态).