如何使用 MySQL 使用 ReactJS、NodeJS 登录？

Posted 2023-02-24

【中文标题】如何使用 MySQL 使用 ReactJS、NodeJS 登录？

【英文标题】：How to signin with ReactJS, NodeJS using MySQL?

【发布时间】：2019-02-04 18:29:11

【问题描述】：

我是 ReactJS 的初学者，我想使用 ReactJS、NodeJS 和 mysql 登录我的表单。

我的班级登录如下：

     handleClick(event)
    var self = this;
    var payload=
      "username":this.state.username,
        "password":this.state.password
    
    axios(
          method: 'post',
          url: '/app/login/',
          data: payload,
          withCredentials: true,
          headers: 
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          
        )

   .then(function (response) 
     console.log(response);
     if(response.data.code == 200)

    this.props.history.push("http://localhost:5000/brillo#/");
     
     else
       swal("Erreur !", "Erreur !", "error");
     
   )
   .catch(function (error) 
     console.log(error);
   );
  
  handleredirect()
    this.props.history.push("/register");
    
  render() 
    return (
      <div className="app flex-row align-items-center">

                    <Form  method="POST" >

                      <InputGroup className="mb-3">
                        <Input type="text" placeholder="Username" autoComplete="username" value=this.state.username onChange=e => this.setState( username: e.target.value ) required/>
                      </InputGroup>
                      <InputGroup className="mb-4">
                        <Input type="password" value=this.state.password placeholder="Password" onChange=e => this.setState(password: e.target.value ) autoComplete="current-password"   required/>
                      </InputGroup>
                      <Row>
                        <Col xs="6">
                          <Button type="button" color="primary" className="px-4" onClick=(event) => this.handleClick(event)>Login</Button>
                        </Col>
                        <Col xs="6" className="text-right">
                          <Button color="link" className="px-0">Forgot password?</Button>
                        </Col>
                      </Row>
                    </Form>

      </div>
    );
  


export default Login;

我的路由器：

exports.login = function(req,res)
  var email= req.body.email;
  var password = req.body.password;
 var username = req.params.username;
  connection.query('SELECT * FROM users WHERE username = ?',[username], function (error, results, fields) 
  if (error) 
   res.send(
      "code":400,
      "failed":"error ocurred"
    )
  else
    if(results.length >0)
      bcrypt.compare(password, results[0].password, function(err, doesMatch)
        if (doesMatch)
     res.send(
       "code":200,
       "success":"login sucessfull"
         );
      else
     res.send(
       "code":204,
       "success":"Email and password does not match"
         );
      
    );
  
    else
      res.send(
        "code":204,
        "success":"Email does not exits"
          );
    
  
  );

当我通过发布http://localhost:4000/app/login/ 使用 Postman 运行我的后端时，我得到：

    "code": 204,
    "success": "Email does not exits"

但是我用我在注册表单上提交的用户名和密码发布，当我运行我的前端时，我得到：

data: …, status: 200, statusText: "OK", headers: …, config: …, …
config:

data:
code:204
success:"Email does not exits"

我希望当我点击登录按钮时，它会被重定向到仪表板页面。

我该如何解决？

【参考方案1】：

您的 nodejs 路由器似乎不正确，您从正文电子邮件、密码、用户名中获取，但电子邮件不是通过 react 发送的。那么您要在数据库、电子邮件或用户名中寻找什么？

下一行

connection.query('SELECT * FROM users WHERE username = ?',[username], function...

我认为应该更像：

connection.query('SELECT * FROM users WHERE username = \'' + username + '\'', function...

顺便说一句，你的反应不正确：你应该返回：

return res.status(500).json( failed: 'error ocurred')

而不是

res.send("code":400,"failed":"error ocurred")

【讨论】：

当我改变它时，我得到： "failed": "error ocurred"

在失败的 json 响应中打印错误以帮助您。 return res.status(500).json( failed: 'error ocurred: ' + error) 而且对于每个 res.send 你应该转换为正确的 res.status(XXX).json(JSON.OBJ) 并添加之前的回报（但这不是您当前的问题）

我得到：xhr.js:178 POST http://localhost:5000/app/login/ 500 (Internal Server Error) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:59 Promise.then (async) request @ Axios.js:51 Login.js:51 Error: Request failed with status code 500 at createError (createError.js:16) at settle (settle.js:18) at XMLHttpRequest.handleLoad (xhr.js:77)