Express服务器如何与React Js组件通信

Question

我有一个Express Server，它需要通过将变量传递给React JS组件来与React组件进行通信。

Express服务器代码：

app.all('/', ensureAuthenticated, function(req, res, next){
    var name = req.user['cn'];
    var emailaddress = req.user['emailaddress'];
    res.sendFile(BUILD+"/index.html");
});

这里的authenticAuthenticated是单一登录功能，可在呈现页面之前对用户进行身份验证。 我需要将登录用户的名称和电子邮件地址变量传递给React组件。 我该如何实现？

谢谢，拉维

Answer 1

您不能使用sendFile发送用户对象，但理想情况下，您可以像执行的那样仅发送文件：

app.get('*', function(req, res){
    res.sendFile(BUILD+"/index.html");
});

然后在反应端，您可以创建一个动作创建者，以在您拥有的主要组件中获取当前用户，例如：

componentWillMount() {
   this.props.fetchUser();
}

fetchUser操作创建者将如下所示：

export const fetchUser = () => async dispatch => {     
    const res = await axios.get('/api/current_user');  
    dispatch({ type: FETCH_USER, payload: res.data }); 
 };

在您的减速器中，您将拥有：

export default function(state = null, action) { 
 switch (action.type) {                             
  case FETCH_USER:
     return action.payload || false;        
  default:
    return state;
 }   
}  

然后您可以在快速端设置一个路由处理程序来处理react动作：

app.get('/api/current_user', (req, res) => {       
   res.send(req.user);                            
});

然后在您的反应端，您可以将用户对象保存在localStorage中

然后要确保必须对用户进行身份验证的后端上的任何路由，可以将中间件ensureAuthenticated添加到路由处理程序。

在我的回答中，我认为您正在使用redux-thunk和axios