NodeJS 登录表单未重定向到主页-即使登录凭据与数据库中的凭据匹配

db2dz4w8  于 2023-02-08  发布在  Node.js
关注(0)|答案(1)|浏览(108)

我有一个登录表单,如果用户的登录信息与MongoDB数据库中的信息匹配,它应该会重定向到我的React应用程序的主页(我有一个单独的注册表单,运行良好)。
问题是,当我测试我的登录表单,并故意键入凭据不匹配我的数据库中,我得到这个错误:
登录名.js:44 POST网址:http://localhost:3001/login 401(未经授权)
然而,当我键入确实存在的凭据时-该错误不再出现,但我得到了我设置的console.log错误-(“login failed”)
为什么我得到这个错误,而不是应用程序重定向到主页?
它显然能够连接到数据库并检查存储在其中的登录详细信息是否与用户的输入相匹配。
还有什么可能导致此问题?
我也尝试过改变url端点,但没有成功。
这是登录表单代码

import React from "react";
import Input from "./Input";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import {      
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

const schema = yup.object({
  username: yup.string().required("Username is a required field"),
  password: yup.string().min(6, "Password must be at least 6 characters"),
});

function Login(props) {
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const formSubmit = (data) => {
    fetch("http://localhost:3001/login", {
      method: "POST",
      body: JSON.stringify({username: data.username, password: data.password}),
      headers: { "Content-Type": "application/json" },
    })
    .then((response) => {
      if (response.status === 200 && props.history) {
        props.history.push("/");
      } else {
        console.log("login failed");
      }
    })
      .catch((error) => {
        console.error("Error:", error);
      });
    console.log(data);
  };

  return (
    <div className="sign-up">
      <h1>Log in</h1>
      <p>Lorem ipsum dolor, sit amet consectetur</p>
      <form onSubmit={handleSubmit(formSubmit)}>
        <Input
          id="username"
          label="Username"
          type="text"
          placeholder="Enter Username"
          register={{ ...register("username") }}
          errorMessage={errors.username?.message}
        />
    
        <Input
          id="password"
          label="Password"
          type="password"
          placeholder="Enter Password"
          register={{ ...register("password") }}
          errorMessage={errors.password?.message}
        />

        <button>Log in</button>
      </form>
      <button className="button-link" onClick={() => props.onFormSwitch("signup")}>
        Don't have an account? Register here.
      </button>
    </div>
  );
}

export default withRouter(Login);

这是服务器端

const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
const Signup = require("./db/dbModel");
const LocalStrategy = require("passport-local").Strategy;
app.use(cors());
app.use(express.json());
mongoose.connect("..removed for StackOverflow Question");
app.use("/", require("./routes/signupRoute"));
app.use(session({ secret: "secret", resave: true, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());

passport.use(
  'local',
  new LocalStrategy(function (username, password, done) {

    Signup.findOne({ username: username }, function (err, user) {
      if (err) {
        return done(err);
      }
      if (!user) {
        return done(null, false);
      }
      if (user.password != password) {
        return done(null, false);
      }
      return done(null, user);
    });
  })
);

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  Signup.findById(id, (err, user) => {
    done(err, user);
  });
});

app.post("/login", (req, res, next) => {  // test tomorrow
  passport.authenticate("local", (err, user, info) => {
    if (err) {
      return next(err);
    }
    if (!user) {
      return res.status(401).json({ message: "Incorrect username or password" });
    }
    req.logIn(user, (err) => {
      if (err) {
        return next(err);
      }
      return res.status(200).json({ message: "Successfully logged in" });
    });
  })(req, res, next);
});

/*
app.post("/login", passport.authenticate("local", {
  successRedirect: "/",
  failureRedirect: "/login",
  failureFlash: true
}));

*/

app.listen(3001, function () {
  console.log("express server is running on port 3001");

});
xdnvmnnf

xdnvmnnf1#

我已经将登录表单中的函数更改为。

fetch("http://localhost:3001/login", {
      method: "POST",
      body: JSON.stringify({ username: data.username, password: data.password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => {
        if (response.status === 200) {
          props.router.navigate("/");
        } else {
          console.log("login failed");
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
    console.log(data);
  };

由于某种原因,props.history.push导致了这个错误--所以它被修改为props.router.navigate

相关问题