我在使用 axios post 时遇到问题

Question

当我使用 axios 时 post 错误不断出现。我还安装了cors。我不知道为什么会这样。这是我的反应代码。

import React, { useState } from 'react'
import { Link } from 'react-router-dom'

import axios from 'axios'

export default function Login() {

const [Email, SetEmail] = useState('')
const [Password, SetPassword] = useState('')


return (
    <div>

            <h1>Login</h1>
            <input type="text" placeholder="Email" value={Email} onChange={(e) => SetEmail(e.target.value)} />
            <input type="password" placeholder="Password" value={Password} onChange={(e) => SetPassword(e.target.value)} />
            <button type="submit" onClick={(e) => {
                                const config = {
                                    headers: {
                
                                        'Content-Type': 'application/json'
                                    }
                                }
                                const body = JSON.stringify({ Email, Password })
                                axios.post('http://localhost:4000/app/signin', body, config)
                                    .then((response) => console.log(response.data))
            }}>Login</button>
            <div style={{ float: "right", marginTop: "10px" }}>
                <Link to="/signup" style={{ color: "white" }}>
                    SIGN UP
                    </Link>
            </div>

    </div>
)
}

我正在练习登录。我没有使用表单标签。因为当我向后端提交数据时，控制台已初始化并且看不到发生了什么。接下来是我的 node.js 代码。

router.post(
'/signin',
[
    check('email', 'Type proper e-mail').isEmail(),
    check('password', 'Password is required').not().isEmpty()
],
async (request, response) => {
    try{



        const {email, password} = request.body;
        let user = await signUpTemplateCopy.findOne({email});
        const errors = validationResult(request);

        if (!errors.isEmpty()) {
            return response.status(401).json({errors: errors.array()});
        }

        if (!user){
            return response.status(401).json({ msg: "There is no user with this e-mail"});

        }

        let isPasswordMatch = await bcryptjs.compare(password, user.password);

        if (isPasswordMatch) {

        const payload = {
            user: {
                id : user.id
            }
        }
        jwt.sign(
            payload,
            config.get('jwtSecret'),
            (err, token) => {
                if (err) throw err;
                response.json({token});


            }
        )
        
        } else return response.status(401).json({msg: "wrong password"});
        

    } catch (error) {
        console.log(error.msg);
        return response.status(500).json({msg: "Server Error..."});
    }
})

我什至猜不出是什么问题。请帮我解决这个问题。

Answer 1

为了验证电子邮件和密码，我推荐 express-validator 库。你会像这样实现它：

router.post(
  "/signin",
  [
    body("email").isEmail().withMessage("Email must be valid"),
    body("password")
      .trim()
      .notEmpty()
      .withMessage("You must supply a password"),
  ]

您可能需要错误处理中间件。对于你的 User 模型，signupTemplateCopy 似乎是一个令人困惑的命名约定，但你会取而代之，运行 if 条件如下：

async (req, res) => {
    const { email, password } = req.body;

    const existingUser = await User.findOne({ email });

    if (!existingUser) {
      throw new BadRequestError("Invalid Credentials");
    }

我使用一个鲜为人知的 npm 库 BadRequestError() 你在上面看到的叫做 @dc_microurb/common@^1.0.7。此外，除了 bcrypt，您可能还想从 crypto 库中尝试 scrypt，但您所拥有的会起作用。

我也不确定您是如何生成 JWT 的。假设您按照我的建议使用 const existingUser = await User.findOne({ email }); 或在您的情况下 const existingUser = await signUpTemplateCopy.findOne({ email });，那么您将采用 existingUser 或在您的情况下 user 来生成 JWT像这样：

const userJwt = jwt.sign(
      {
        id: existingUser.id,
        email: existingUser.email,
      },
      process.env.JWT_KEY!
    );

然后您需要将该 JWT 存储在我在您的代码中任何地方都看不到的会话对象中，如下所示：

req.session = {
      jwt: userJwt,
    };

然后你终于可以发回 res.status(200).send(user); 或者在我的例子中 res.status(200).send(existingUser);

我在使用 axios post 时遇到问题

I'm having trouble using axios post in react

unauthorized

node.js

http-status-code-401

reactjs

axios