Question

我正在通过将变量传递给React JS组件来表达需要与React组件通信的Server。

Express服务器代码：

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

这里ensureAuthenticated是单点登录功能，它在呈现页面之前对用户进行身份验证。我需要将登录用户的名称和emailaddress变量传递给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;
 }   
}

然后你可以在快递方面设置一个路由处理程序来处理反应动作：

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

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

中

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

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

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

1 个答案: