如何从快递app.js加载反应组件?

我只是在我的应用程序中包含快速会话。 我在我的server.js中设置req.session.user = user。 我也发送到我的/欢迎路线,代表我的主页。 我正在使用反应路由器在用户导航时在客户端显示我的组件。 但是,在实现快速会话之后,我想要expression/欢迎路由,以便通过req.session.user对象加载我的WelcomeUser组件,并提供有关可用用户的信息。 我的主要动机是发送快速req.session.user到WelcomeUser组件,所以我可以为我的用户创build一个configuration文件页面。 我正在寻找解决scheme,我发现使用fetchAPI从快速路线获取数据。 解决方法是在我的server.js中使用不同的路由,例如/ getsession,并从componentDidMount生命周期方法中的URL中获取会话,但是我不知道这是否是最佳方式。 以下是我的代码的相关部分。

这是类似于我用来显示我的组件的反应路由器路由的高速路由。 换句话说,在我的react路由器中的/ welcome路由器调用callback(null,WelcomeUser)来显示组件。

app.get('/welcome', function (req, res, next) { if(!req.session.user){ res.status(401).send(); }else{ console.log("********THIS IS THE USER SESSION******* : "+ req.session.user); // res.status(200).send( "We are here" ); res.status(200).render( './WelcomeUser.js' ); } }); 

以下是我的反应路由器:

  component: Base, childRoutes: [ { path: '/', component: HomePage }, { path: '/welcome', getComponent: (location, callback) => { if (*some_login_mechanism_to_identify_if_user_is_loggedin*){ callback(null, WelcomeUser); } else { callback(null, HomePage); } } }, ***morecode*** 

以下是我的本地身份validation。 你可以看到我正在设置req.session.user = user; 在这里我正在使用护照本地策略。

 function(req, email, password, done) { process.nextTick(function() { if(!req.user) { User.findOne({'local.email': email}, function(err, user) { if(err) { console.error(err); return done(err); } if(user) { return done(null, false, {errMsg: 'email already exists'}); } else { var newUser = new User(); newUser.username = req.body.username; newUser.email = email; newUser.password = password; req.session.user=newUser; newUser.save(function(err) { if(err) { if(err.message == 'User validation failed') { return done(null, false, {errMsg: 'Please fill all fields'}); } return done(err); } return done(null, newUser); }); } }); } 

以下是我的社交authentication路线之一:

 function(req, accessToken, refreshToken, profile, done) { process.nextTick(function() { if(!req.user) {//confirm that user not loggedin User.findOne({'social.google.id': profile.id }, function(err, user) { if (err) { console.error('There was an error accessing the dbase', err.message); return done(err); } if (user) { req.session.user=user; return done(null, user); } else { var newUser = new User(); // variables to set my user information from profile variable req.session.user=newUser; newUser.save(function(err) { if (err) { console.error(err); return done(err); } return done(null, newUser); }); } } ); } 

所有这些代码都存在于他们单独的文件中。 例如,login存在于本地login文件中,社交login存在于googlelogin文件中。 以下是在validation用户身份后redirect到/ welcome路由的代码。

 app.get('/auth/google/callback', passport.authenticate('google', { failureRedirect: '/' }), function(req, res) { res.redirect('/welcome'); // this was loading the component from the react router, before I added app.get('/welcome') route in my server.js }); 

这个代码工作正常之前,我有我的app.get(/欢迎)路线在我的server.js。 在我的server.js中添加app.get(/ welcome)后,似乎express正在重写来自react路由器的我的/ welcome路由结果,并且只显示“我们在这里”(我用快速的欢迎路由表示)主页。