发送 locale.storage 电子邮件和新电子邮件 axios 发布请求

Question

我正在尝试更改当前登录用户的电子邮件。

基本上我有一个输入“新”电子邮件（组件代码）的字段：

 const [email, setEmail] = useState("");
.........
                        
 <input type="email" placeholder={user.email} onChange={(e) => setEmail(e.target.value)}/>

我在组件中的 axios post 请求：

const changeEmail = async () => {
            try {
                const res = await axios.post("/auth/change/", {
                    email: email
                }, {
                    headers: {
                        token:
                            "Bearer "+JSON.parse(localStorage.getItem("user")).accessToken,
                    },
                }).then(r => console.log(r)).catch(err => console.log(err))
            } catch (err) {
                console.log(err);
            }
        };

我目前的server/routes/auth.js：

router.post("/change", verify , async (req, res) => {
    if(req.body.email === '' || !(req.body.email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g))){
        res.status(400).json("Email not valid")
    }
    try {
        User.findOne({
            where: {
                email: JSON.parse(localStorage.getItem("user")).email
            },
        }).then((user) => {
            if(user === null) {
                console.log("email not in db")
                res.status(403).json("Email not valid")
            } else {
;               user.update({
                email : req.body.email
                })
            }
        })
    } catch (err) {
        console.log(err)
        res.status(500).json(err);
    }
});

我的想法是在数据库中搜索 locale.storage 电子邮件，如果找到，则使用在 useState 中设置的电子邮件更新用户。但显然语言环境存储在 api 中不可用。有没有办法将新旧邮件发送到 api 中的 post request 中？

Answer 1

您可以从客户端代码中的 localStorage 获取用户的电子邮件，就像您获得令牌一样。

const changeEmail = async () => {
 try {
    const res = await axios
    .post(
        "/auth/change/",
        {
        email: email,
        old_email: JSON.parse(localStorage.getItem("user")).email
        },
        {
        headers: {
            token:
            "Bearer " + JSON.parse(localStorage.getItem("user")).accessToken,
        },
        }
    )
    .then((r) => console.log(r))
    .catch((err) => console.log(err));
  } catch (err) {
    console.log(err);
 }
};

并将 api 处理程序更改为这些（这里我们试图从旧电子邮件中获取用户，如果找到更新用户电子邮件）

   router.post("/change", verify, async (req, res) => {
    if (
        req.body.email === "" ||
        !req.body.email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g)
    ) {
        res.status(400).json("Email not valid");
    }
    try {
        User.findOne({
        where: {
            email: req.body.old_email,
        },
        }).then((user) => {
        if (user === null) {
            console.log("email not in db");
            res.status(403).json("Email not valid");
        } else {
            user.update({
            email: req.body.email,
            });
        }
        });
    } catch (err) {
        console.log(err);
        res.status(500).json(err);
    }
  });

更新用户邮箱后不要忘记更新localStorage，否则会处于不一致阶段。