返回视图并将数据发送到Passport.js Oauth之后

首先让我说，对不起，如果这是一个简单的问题，我是新手反应和表达的，并且找不到答案。

我正在尝试将数据传递给React对象，并基于Passport.js返回路线的视图。

我有我需要通过的对象，我只是不知道如何通过它。

首先用户登陆验证路线

router.get('/steam',
    passport.authenticate('steam'),
    (req, res) => {
    //Not used
});

然后在他们通过Steam登录后返回此路线：

router.get('/steam/return',
    passport.authenticate('steam', { failureRedirect: '/' }),
    (req, res) => {
        res.redirect('/dashboard');
});

从这里开始，我将它们传递到/仪表板路由，在那里我接入用户对象并创建另一个调用以获取其库，然后将数据发送到视图：

：

router.get('/', (req, res, next) => {
    var OwnedGamesReqUri = 'http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=' + process.env.STEAM_API + '&steamid=' + req.user.steamid + '&format=json&include_appinfo=1';
    request(OwnedGamesReqUri, (error, response, body) => {
      if (!error && response.statusCode == 200) {
        var resObj = JSON.parse(body);
        //name, playtime_forever, playtime_2weeks, img_icon_url, img_logo_url
        res.render('dashboard', { user: req.user, games: resObj.response.games});
      }
    });
});

我能够通过车把在仪表板视图中获取所需的所有数据，但是我面临的问题是，我可以将拥有的游戏数据传递给另一个JS文件中的React对象。我在另一个文件中设置了一个React组件，该文件通过捆绑文件加载到仪表板。我假设这需要转到服务器，但我不确定如何实现此目的。

您的问题与reactjs或passportjs无关。基本上，我们可以将服务器端JavaScript中的变量传递给客户端JavaScript。因此，您可以在客户端使用的任何框架中使用该变量。

实现此目的的最简单方法是将您的值作为变量声明在模板中的内联脚本标签中。因此，您的客户端JS将具有该值的全局变量，该变量可以从客户端脚本中的任何地方访问。

作为一个例子，如果具有字符串值的变量如下

var test = 'abc';

您可以在脚本标签中将其作为变量声明渲染。

res.render('template', test)

模板文件：

<script>
    var test = '{{test}}';
</script>

现在，此模板将生成一个HTML页面，如下所示。

<script>
    var test = 'abc';
</script>

因此， test变量将是带有值'abc'的全局客户端javascript变量，可以从同一页面上的任何其他JavaScript代码访问。

即使对字符串变量上述很简单，但是当您尝试发送对象时，事情会变得复杂。因为对象变量在模板中以[Object object]的形式渲染。为了避免这种情况，您需要在发送将其对象的字符串版本发送到车把模板之前发送。

var data = JSON.stringify({ user: req.user, games: resObj.response.games});
res.render('dashboard', data);

然后，您的dashboard模板还需要具有带有变量声明的脚本标签。

//...
<script>
    var data = {{data}};
</script>
//...

现在，data将是客户端的全局变量，您可以在ReactJS代码中使用它来访问user和games。

有几种方法可以做到这一点，具体取决于您的反应组件如何管理其状态。

反应性状态（RXJS，MOBX，NX-OBSEVE）：最容易处理的是，您的组件以及非JS代码既可以访问这些商店，又可以一起赶上更新。这提供了数据提供商和消费者之间非常松散的耦合。
具有通量模式的组件：如果您的组件使用Redux，Reflux或任何其他基于通量的库来管理状态，则可以从磁通代码中导出相应的操作/功能，任何JavaScript代码都可以调用，以更新组件的状态。
在组件中维护的状态：有点混乱。在这种情况下

相关内容

最新更新

热门标签：