我的应用程序有一个登录页面,当用户输入正确的登录凭据时,该页面工作正常,但在测试用户名或密码的最终错误条目时,我意识到我的catch块无法正确格式化来自后端的错误对象,因此没有任何内容呈现到前端。
我尝试过在后端使用res.send(401).json({"message":"Unauthorized"});
而不是res.sendStatus(401);
,但是前一个方法不会触发错误响应,而是在提取过程中作为响应返回。
在使用res.sendStatus(401);
时,虽然触发了错误,但catch块无法呈现其响应。
后端:
const User = require('../model/User');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const handleLogin = async (req,res) => {
const user = req.body.user.toLowerCase();
const pwd = req.body.pwd;
if(!user || !pwd) return res.sendStatus(400);
const foundUser = await User.findOne({username: user}).exec();
if(!foundUser) return res.sendStatus(401);
const match = await bcrypt.compare(pwd, foundUser.password);
console.log(match);
if(match){
const roles = Object.values(foundUser.roles);
const accessToken = jwt.sign(
{"userInfo": {
"username": foundUser.username,
"roles": roles
}},
process.env.ACCESS_TOKEN,
{expiresIn: "300s"}
);
const refreshToken = jwt.sign(
{"username": foundUser.username},
process.env.REFRESH_TOKEN,
{expiresIn: "1d"}
);
foundUser.refreshToken = refreshToken;
const result = await foundUser.save();
if(!result) return res.status(500);
res.cookie("jwt",refreshToken,{httpOnly: true, sameSite: "None", maxAge: 24*60*60*1000});
res.json({user, roles, accessToken});
}
else{
res.sendStatus(401);
}
}
module.exports = {handleLogin};
取:
fetch(BASE_URL + "/login", {
method: "POST",
headers: {
"Content-Type":"application/json"
},
body: JSON.stringify({user: username,pwd})
})
.then(res => res.json())
.then(data => {
setUser(data);
console.log(data);
})
.then(() => {
setSuccess(true);
setTimeout(() => {
navigate("/");
}, 1000);
})
.catch((err)=>{
console.log(err);
if(err.status == "401"){
setErrMsg("Wrong username or password.")
}
else{
setErrMsg("Login failed, try again.")
}
errRef.current.focus();
})
一旦触发错误,控制台将显示以下错误SyntaxError: Unexpected token 'U', "Unauthorized" is not valid JSON
,除此之外,该错误不会呈现到前端。
如何正确地格式化来自后端的响应或处理来自前端的错误响应,以便能够正确地将其呈现到视图中?
1条答案
按热度按时间amrnrhlw1#
你的第一个
then
假设响应有有效的json,它应该检查响应状态是否是ok
,如果不是,抛出一个错误,这个错误将被catch
捕获。