Node.js 在passport.js oauth之后返回视图并将数据发送到react

首先让我说，如果这是一个简单的问题，对不起，我是一个新的反应和表达，无法找到答案，所以

我正在尝试将数据传递给react对象，并基于passport.js返回路线渲染视图

我有我需要通过的物体，我只是不知道如何通过它

首先，用户点击auth路由

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

然后，在他们通过steam登录后，他们将返回此路径：

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

从这里，我将它们传递到/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});
      }
    });
});

---

我可以通过手柄抓取仪表板视图中所需的所有数据，但我面临的问题是如何将ownedgames数据传递给另一个JS文件中的react对象。我在另一个文件中设置了react组件，该文件通过捆绑文件加载到仪表板。我假设这需要转到服务器，但我不确定如何实现这一点。

根据React组件管理其状态的方式，有几种方法可以做到这一点

反应状态（RxJS、mobx、nx观察）： 最容易处理的是，您的组件以及非js代码都可以访问这些存储并一起跟踪更新。这在数据提供者和使用者之间提供了非常松散的耦合

具有通量模式的组件： 如果您的组件正在使用Redux、Reflow或任何其他基于flux的库来管理状态，那么您可以从flux代码中导出相应的操作/函数，任何JavaScript代码都可以调用这些操作/函数来更新组件的状态

组件内保持的状态： 有点乱。在这种情况下，您的组件可以导出一个回调，脚本可以调用该回调向其发送新数据

---

你的问题不是关于reactjs或passportjs。这基本上就是我们如何将服务器端javascript中的变量传递给客户端javascript。因此，您可以在客户端使用的任何框架中使用该变量

实现这一点的最简单方法是将值呈现为模板中内联脚本标记内的变量声明。因此，您的客户端js将有一个具有该值的全局变量，可以从客户端脚本中的任何位置访问该变量

例如，如果有一个字符串值的变量，如下所示

var test = 'abc';

您可以在模板中将其呈现为脚本标记内的变量声明

res.render('template', test)

模板文件：

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

然后，您的

仪表板

模板除了其原始内容外，还需要具有带有变量声明的脚本标记

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

/。。。
var data={{data}}；
//...

---

现在，

data

将是客户端的一个全局变量，您可以在reactjs代码中使用它来访问

user

和

games

一般来说，您可以调用ajax来提取数据，在服务器上呈现页面时，将数据保存到全局javascript变量，并在react组件中选取该变量，或者可以呈现react服务器端。这并不回答1、2或3在服务器端身份验证后如何从服务器接收数据

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

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