页面重定向在 Node Js 和 React JS 上无法使用会话进行简单登录

Question

I am working on a simple login form using React and NodeJs with connected to Mysql DB. The problem is redirect is not working. I am adding redirect method and API in server.js and fetch method in loginpage.js as view below:

// API in server.js
/sales login
app.post('/login', jsonParser, (req, res) => { //jsonParser,
    let username = req.body.username;
  let password = req.body.password;
  console.log("req: ",req.body);
    if (username && password) {
        dbConn.query(`SELECT * FROM user_tbl WHERE username = ? AND password = ?`, [username, password], (err, results, fields) => {
            if (results.length > 0) {
                req.session.loggedin = true;
                req.session.username = username;
        res.redirect('/home');
        console.log(results)
        console.log("req: ", req.body);
            } else {
                res.send('Incorrect Username and/or Password!');
            }           
            res.end();
        });
    } else {
        res.send('Please enter Username and Password!');
        res.end();
    }
});

app.get('/home', (req, res) => {
    if (req.session.loggedin) {
        res.send('Welcome back, ' + req.session.username + '!');
    } else {
        res.send('Please login to view this page!');
    }
    res.end();
});

in loginpage.js, the code looks like :

async SubmitLogin(event){
  event.preventDefault();
  console.log(this.state)
  await fetch(`http://localhost:4000/login`, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      },
      body: JSON.stringify(this.state)
  })
  .then ((response) => {
    return response.json();
  })
  .then((result) => {
    console.log(result);
    if (result.Status === 'Invalid')
      alert('Invalid User');
      else
        this.props.history.push({ Home });
        alert('Login Sucessfull');
  })
  .then ((body) => {
    console.log(body);
  })
  .catch((err) => {
    return console.log();
  })

  alert('Test Submit Login')
}

I already tried the connection using postman, and there is no error. And I also tried sending username and password from loginpage.js is also no problem. The result displayed in my terminal:

Hopefully, I can get answer

Answer 1

In your client side, you are doing this:

this.props.history.push({ Home });

But push() expect route. So you should provide '/home' or something like that depending on how you defined routes in your react application.

example: this.props.history.push('/home'); //route to your Home component this.props.history.push('/home'); //route to your Home component

Update: You can try something like this. API code:

// API in server.js
/sales login
app.post('/login', jsonParser, (req, res) => { //jsonParser,
    let username = req.body.username;
    let password = req.body.password;
    console.log("req: ",req.body);
    if (username && password) {
        dbConn.query(`SELECT * FROM user_tbl WHERE username = ? AND 
                      password = ?`, [username, password],        
       (err, results, fields) => {
            if (results.length > 0) {
                req.session.loggedin = true;
                req.session.username = username;
                res.redirect('/home');
                console.log(results)
                console.log("req: ", req.body);
            } else {
                res.send(401, 'Incorrect Username and/or Password!');
            }           
            res.end();
        });
    } else {
        res.send(401,'Please enter Username and Password!');
        res.end();
    }
});

app.get('/home', (req, res) => {
    if (req.session.loggedin) {
        res.send('Welcome back, ' + req.session.username + '!');
    } else {
        res.send('Please login to view this page!');
    }
    res.end();
});

In loginpage.js. Make changes as following:

async SubmitLogin(event){
  event.preventDefault();
  console.log(this.state)
  await fetch(`http://localhost:4000/login`, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      },
      body: JSON.stringify(this.state)
  })
  .then ((response) => {
    if(response.status == 401) {
        throw new Error('Unauthorized');
    }
    return response.json();
  })
  .then((result) => {
    console.log(result);

    this.props.history.push('/home');
    alert('Login Sucessfull');
  })
  .catch((err) => {
    console.log(err);
  })

  alert('Test Submit Login')
}

Hope this helps. I just made this workable. There are lots of improvements that can be made here.

Answer 2

如果您将客户端和服务器端分开，则在客户端使用<Redirect to='/home' /> react-router-dom