![](/img/trans.png)
[英]response.redirect is not working in node.js which using session
[英]Page Redirect not Working on Node Js and React JS on Simple Login Using Session
我正在使用連接到 Mysql DB 的 React 和 NodeJs 處理一個簡單的登錄表單。 問題是重定向不起作用。 我在 server.js 中添加重定向方法和 API,在 loginpage.js 中添加 fetch 方法,如下所示:
// 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();
});
在 loginpage.js 中,代碼如下所示:
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')
}
我已經嘗試使用郵遞員進行連接,沒有錯誤。 而且我也嘗試從 loginpage.js 發送用戶名和密碼也沒有問題。 結果顯示在我的終端中:
希望我能得到答案
在您的客戶端,您正在執行以下操作:
this.props.history.push({ Home });
但是 push() 期望路由。 因此,您應該提供 '/home' 或類似內容,具體取決於您在 React 應用程序中定義路由的方式。
例如: this.props.history.push('/home'); //route to your Home component
this.props.history.push('/home'); //route to your Home component
更新:你可以嘗試這樣的事情。 接口代碼:
// 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();
});
在 loginpage.js 中。 進行如下更改:
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')
}
希望這可以幫助。 我只是讓這個可行。 這里可以進行很多改進。
如果您將客戶端和服務器端分開,則在客戶端使用<Redirect to='/home' />
react-router-dom
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.