使用react-router并通过Passport.js进行身份validation – 可能吗?

所以我正在开发一个包含React,Express.js + Passport和Webpack的项目。 我理解通过react-router将所有内容推送到“主”React组件的概念,然后让它散列出给定路线显示的内容。 我想这在这里会很好。 首先,我是React新手。

我的顾虑是:

1)我可以/我怎样才能使用护照来validation我的路线? 如果我正确理解react-router,我将在我的express app.js文件中有一条path,指向名为<Application/>的React组件。 但是,护照需要router.get('/myroute', isAuthenticated, callback)来检查会话。 反应路由器是否仍然可以这样做?

2)此外,如果可能的话,我如何将Express中的path的值传递给我的视图,在React中? 我知道在一个典型的观点,我可以使用<%= user %>{{user}}如果我从我的路线传递。 这可能吗?

       

网上收集的解决方案 "使用react-router并通过Passport.js进行身份validation – 可能吗?"

从APIpath中拆分视图渲染path。 毕竟你可以设置validation逻辑到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/>)); }); }); 

所以你必须解决你如何将视图中的服务器端渲染数据传递到客户端(select你的同构数据传输技术)。

您也可以只在客户端创build视图和redirect逻辑,并首先将组件处于“等待”状态,在组件将被挂载(通过API调用检查身份validation状态)后,将在客户端上parsing这些状态。