如何使用fetch在react中呈现node.js中的错误

f4t66c6m  于 2022-11-22  发布在  Node.js
关注(0)|答案(1)|浏览(102)

我的应用程序有一个登录页面,当用户输入正确的登录凭据时,该页面工作正常,但在测试用户名或密码的最终错误条目时,我意识到我的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,除此之外,该错误不会呈现到前端。
如何正确地格式化来自后端的响应或处理来自前端的错误响应,以便能够正确地将其呈现到视图中?

amrnrhlw

amrnrhlw1#

你的第一个then假设响应有有效的json,它应该检查响应状态是否是ok,如果不是,抛出一个错误,这个错误将被catch捕获。

.then(res => {
        if (res.ok) {
            return res.json();
        }
        throw new Error(res.status);
    })

相关问题