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

Question

我正在使用护照在我的 React 样板应用程序的服务器中进行身份验证，但我不确定如何从我的服务器端获取 req.user 到 reactjs...

我应该改变这个吗

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 将数据嵌入视图非常简单。

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

views/index.哈巴狗

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 的用户信息

reactjs display user info from passportjs auth

node.js

reactjs

passport.js