Question

我是新来的。我想帮助解决几天阻止我的问题。

设计简单。我有一个运行localhost的server.js。它提供POST（登录以获取身份验证）和GET方法（在身份验证后检索json）。登录使用基本身份验证来验证用户的电子邮件/密码。如果匹配，则返回状态200并将用户置于会话＆amp;响应。以下是服务器端代码：

//Log user in Server.js  
app.post('/session/login', function(req, res) {  
  var email = req.body.email;  
  var password = req.body.password;

  if ( null == email || email.length < 1
  || null == password || password.length < 1 ) {  
res.status(401).send("Wrong username or password");
return;
  }

  if (email == "xxxxx" && password == "xxxxx") {  
var user = new User(email, password);      
req.session.user = user;  
  return res.status(200).send({
    auth : true,
    user : user
  });
}else{  
  return res.status(401).send("Wrong username or password");
}
});

Get Method在服务器可以传回json之前有一个基本的auth。以下是代码：

function Auth (req, res, next) {  
  if(req.session.user){  
next();
  }else{  
    console.log("Auth");  
res.status(401).send({
  flash : 'Please log in first'
    });
  }
}


app.get('/form/FormFields', Auth, function(req, res) {  
  fs.readFile(FORMFIELDS_FILE, function(err, data) {  
  if (err) {
console.error(err);
process.exit(1);
  }  
  res.json(JSON.parse(data));
  });
});

现在客户端，我有两个js文件，一个是电子邮件/密码的表单，上面调用Login，另一个是使用ajax在反应中获取表单信息。导航使用React-Router。以下是一些代码：

// login.js
var LoginBox = React.createClass({

  getInitialState: function () {
    return {text: '', data: []};
  },
  handleLoginSubmit: function (data) {
$.ajax({
  url: "https://localhost:3000/session/login",
  dataType: 'json',
  type: 'POST',
  data: data,
  success: function(data) {
    this.setState({data: data});
  }.bind(this),
  error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
  }.bind(this)
    });
  },    
  render: function () {
return(
  <div className="container">
    <LoginForm data={this.state.data} onLoginSubmit={this.handleLoginSubmit} />
    <p className="tips">{this.state.text}</p>
  </div>
);
  }

});

var LoginForm = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },  
  getInitialState: function () {
    return {data:0,tittle: 'Login Test',text:''};
  },
  handleSubmit: function (e) {
    e.preventDefault();
    var email = this.refs.email.value.trim();
    var password = this.refs.password.value.trim();
    if (!email || !password) {
      this.setState({text:"please input both username and password!"});
      return;
    }
    this.props.onLoginSubmit({email:email,password:password});
    this.setState({text:""});
    this.refs.email.value = '';
    this.refs.password.value = '';

    //Routing defined in React-Router
    const path = '/form';
    this.context.router.push(path);
  },
  render: function () {
      return (
    <form className="loginForm" onSubmit={this.handleSubmit}>
      <p>{this.state.tittle}</p>
      <input type="email" placeholder="Your username" ref="email"/>
      <input type="password" placeholder="Your password" ref="password"/>
      <input type="submit" value="Login"/>
      <p className="tips">{this.state.text}</p>
    </form>
  )
  }
});


//code piece in form.js to call server and get form info

loadFieldsFromServer: function() {
$.ajax({
  url: "https://localhost:3000/form/FormFields",
  dataType: 'json',
  cache: false,
  success: function(data) {
    this.setState({data: data});
  }.bind(this),
  error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
  }.bind(this)
});
  },

最终，这是我的问题。登录没问题，我可以从网络监控中看到。我打印了登录服务器，发现用户已保存在会话中。但是当它导航到form.js时，我总是从下面的服务器代码中检索401。从日志中，我发现会话中的用户信息消失，因此以下401返回。

else{
console.log("Auth");
res.status(401).send({
  flash : 'Please log in first'
});

}

请有人帮忙看看我错在哪里。非常感谢。顺便说一下，当我使用Postman模拟两次调用服务器时，只需分享更多信息。一旦我首先调用login，我也可以成功检索表单json，除非我调用logout来清理会话中的用户。只是不知道为什么它在程序中不起作用。

使用React-Router在反应组件中导航两个ajax调用时，会话信息丢失

0 个答案: