Question

我刚刚在我的申请中加入了快速会议。我在server.js中设置了req.session.user = user。我也将它发送到我的/欢迎路线，它代表我的主页。我正在使用react路由器在用户导航时在客户端显示我的组件。但是，在实现快速会话之后，我想表达/欢迎路由加载我的WelcomeUser组件，其中包含有关通过req.session.user对象提供的用户的信息。我的主要动机是将express req.session.user发送到WelcomeUser组件，这样我就可以为我的用户创建一个配置文件页面。我正在寻找解决方案，我发现使用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***

以下是我的本地身份验证。你可以看到我正在设置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);
            });
          }
      });
    }

以下是我的社交认证路线之一：

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);
              });
            }
          }
        );
      }

所有这些代码都存在于各自的文件中。例如，登录存在于本地登录文件中，社交登录存在于google-login文件中。以下是我的用户身份验证后重定向到/ 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
  });

在我的server.js中使用app.get（/ welcome）路由之前，此代码工作正常。在我的server.js中添加了app.get（/ welcome）之后，似乎快递覆盖了来自反应路由器的我/欢迎路由结果，只显示“我们在这里”（我在我的快速欢迎路线中注释了它）主页。

如何从express app.js加载react组件？

0 个答案: