Блог

Я пытаюсь создать форму входа с помощью react и MongoDB

вот мой контроллер:

 authenticate: function (req, res, next) {
    Admin.findOne({
        username: req.body.username
    }, function (err, adminInfo) {
        if (err) {
            next(err);
        } else {
            if (bcrypt.compareSync(req.body.password, adminInfo.password)) {
                const token = jwt.sign({
                        id: adminInfo._id
                    },
                    req.app.get("secretKey"), {
                        expiresIn: "1h"
                    }
                );
                res.json({
                    status: "success",
                    message: "admin found!!!",
                    data: {
                        user: adminInfo,
                        token: token
                    },
                });
            } else {
                res.json({
                    status: "error",
                    message: "Invalid email/password!!!",
                    data: null,
                });
            }
        }
    });
}
  

и вот моя LoginForm.jsx:

 const LoginForm = (props) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [routeRedirect, setRouteRedirect] = useState(false);
  const [error, setError] = useState(false);

  const login = (e) => {
    e.preventDefault();
    const admin = {
      username,
      password,
    };
    axios
      .post("/login/authenticate", admin)
      .then((res) => {
        if (res.data.errors) {
          setError(true);
        } else {
          return null;
        }
      })
      .catch((err) => console.log(err));
    setRouteRedirect(true);
  };
  return (
    <ContactWrapper>
      <ContactContainer>
        {routeRedirect ? (
          <Fragment>Hello</Fragment>
        ) : (
          <Fragment>
            <Title>LOGIN</Title>
            <LoginForm onSubmit={login}>
              <FormLabel>Username:</FormLabel>
              <FormInput
                type="text"
                name="username"
                onChange={(e) => setUsername(e.target.value)}
              />
              <FormLabel>Password:</FormLabel>
              <FormInput
                type="password"
                name="password"
                onChange={(e) => setPassword(e.target.value)}
              />
              <LoginButton type="submit">Login</LoginButton>
            </LoginForm>
          </Fragment>
        )}
      </ContactContainer>
    </ContactWrapper>
  );
};

export default LoginForm;
  

Как я могу аутентифицировать имя пользователя и пароль при нажатии на кнопку?
Я попытался ввести неправильный пароль и неправильное имя пользователя, и он по-прежнему выдает мне «Привет»
Как я могу это исправить?

Спасибо

Вот мой проект на github, если вы хотите просмотреть мой код:https://github.com/nathannewyen/the-beuter

Похоже, что вы вызываете «setRouteRedirect (true)» независимо от результата вызова api.

Вероятно, вам следует установить routeredirect в функции then вашего post, если результат вас удовлетворяет.

Этот вызов

 axios
  .post("/login/authenticate", admin)
  .then((res) => {
    if (res.data.errors) {
      setError(true);
    } else {
      return null;
    }
  })
  .catch((err) => console.log(err));
  

Не блокирует код, поэтому после отправки запроса будет вызван setRouteRedirect.