[英]Failed Login Using NodeJS API in ReactJs
I am working on simple user login in ReactJs with Nodejs and Express-session.我正在使用 Nodejs 和 Express-session 在 ReactJs 中进行简单的用户登录。 I got problem that my front end (React login page) not working.我遇到了前端(React 登录页面)无法正常工作的问题。 here is the Fetch API that I used in Login.js:这是我在 Login.js 中使用的 Fetch API:
SubmitLogin (event) {
event.PreventDefault();
debugger;
fetch('http://localhost:4000/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type' : 'application/json'
},
body : JSON.stringfy (this.state)
}).then((Response) => Response.json())
.then((result) => {
console.log(result);
if (result.Status === 'Invalid')
alert('Invalid User');
else
this.props.history.push({Home});
alert('Login Sucessfull');
})
console.log(this.state);
alert("test input login")
}
for connecting to backend, I added server.js with coded like this :为了连接到后端,我添加了 server.js,其编码如下:
app.post('/login', jsonParser, (req, res) => {
var username = req.body.username;
var password = req.body.password;
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)
} 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();
});
I already tested back end using postman, and it's working.我已经使用邮递员测试了后端,并且它正在工作。 Please help me with some suggestion and how I can put console.log to find the error in Login.js.请帮我提供一些建议,以及如何放置 console.log 来查找 Login.js 中的错误。 Thanks for help感谢帮助
Change the Response.json()
to Response.text()
as you are returning text
in response not json
, and you could add the catch
block to handle the errors.更改Response.json()
来Response.text()
因为你是返回text
响应不json
,你可以添加catch
块来处理错误。
I can see in your code that you are using Content-Type
application/x-www-form-urlencoded
in the Postman
and application/json
in the fetch
call.我可以在您的代码中看到您在Postman
中使用Content-Type
application/x-www-form-urlencoded
,在fetch
调用中使用application/json
。 use same Content-Type
in both request.在两个请求中使用相同的Content-Type
。
SubmitLogin(event) {
event.PreventDefault();
fetch('http://localhost:4000/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringfy(this.state)
}).then((Response) => Response.text())
.then((result) => {
console.log(result);
if (result.Status === 'Invalid')
alert('Invalid User');
else
this.props.history.push({ Home });
alert('Login Sucessfull');
}).catch(error => {
console.error(error)
})
console.log(this.state);
alert("test input login")
}
You could change your code to use async/await
for better readability.您可以更改代码以使用async/await
以获得更好的可读性。
async SubmitLogin(event) {
event.PreventDefault();
try {
let response = await fetch('http://localhost:4000/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringfy(this.state)
});
let result = await response.text();
console.log(result);
if (result.Status === 'Invalid')
alert('Invalid User');
else
this.props.history.push({ Home });
alert('Login Sucessfull');
} catch (error) {
console.error(error.message);
}
console.log(this.state);
alert("test input login")
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.