Question

我使用护照在我的反应样板应用程序的服务器中进行身份验证，但我不知道如何从我的服务器端获取req.user以反应...

我应该改变吗

app.get('*', (req, res) => {
    fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {
      if (err) {
        res.sendStatus(404);
      } else {
        res.send(file.toString());
      }
    });
  });

我很不确定如何做到这一点，特别是因为我之前没有使用过reactjs

Answer 1

您必须添加一条路线（在您发送的代码之前）以检索它，如下所示：

app.get('/userDetails', (req, res) => res.json(req.user))

并发出警告：您的用户对象可能有一些您不应该发送给客户的字段，因此最好在发送回复之前将其删除：

app.get('/userDetails', (req, res) => {
  const { user } = req.body
  delete user.password
  res.json(user)
})

然后，您需要通过向后端发出请求来获取数据。一种可能的实现方式是：

class SomeComponent {
  state = { user: null }
  componentDidMount () {
    fetch('/userDetails')
    .then(res => res.json())
    .then(user => {
      // do something with the data
      console.log(user)
      this.setState({ user })
    })
  render () {
    const { user } = this.state
    return (
      <span>{user ? user.firstName : 'No user data'}</span>
    )
  }
}

Answer 2

如果您在视图中使用templating engine嵌入数据非常简单。

这是一个使用哈巴狗的例子：

<强>视图/ index.pug

doctype html
html
    body
        h2 Page
        script.
            window.user = '#{JSON.stringify(user)}'

<强> server.js

app.use('view engine', 'pug');
...
app.get('*', (req, res) => {
    res.render('index', {
         user: {
             id: 1,
             name: 'Joe Bloggs'
             ...
         }
    }); 
});

reactjs显示来自passportjs auth的用户信息

2 个答案: