用戶驗證使用Postman工作,在使用FormData的客戶端上失敗

我使用postman檢查后端代碼,它是working.name,email,password存儲在數據庫中使用postman.but當我在注冊表單中輸入名稱、電子郵件、密碼時,如果顯示此error-----用戶驗證失敗:密碼:請輸入您的密碼,電子郵件:請輸入您的電子郵件,名稱:請輸入您的名稱

userModel.js

const mongoose = require("mongoose");
const validator = require("validator");

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, "Please Enter Your Name"],
    maxLength: [30, "Name cannot exceed 30 characters"],
    minLength: [4, "Name should have more than 4 characters"],
  },
  email: {
    type: String,
    required: [true, "Please Enter Your Email"],
    unique: true,
    validate: [validator.isEmail, "Please Enter a valid Email"],
  },
  password: {
    type: String,
    required: [true, "Please Enter Your Password"],
    minLength: [8, "Password should be greater than 8 characters"],
    select: false,
  },
  role: {
    type: String,
    default: "user",
  },
  resetPasswordToken: String,
  resetPasswordExpire: Date,
});
module.exports = mongoose.model("User", userSchema);

catchAsyncErrors.js

module.exports = (theFunc) => (req, res, next) => {
    Promise.resolve(theFunc(req, res, next)).catch(next);
  };

userController.js

exports.registerUser = catchAsyncErrors(async (req, res, next) => {
    
 const user = await User.create(req.body);
    
    res.status(201).json({
        success:true,
        user,
    });
});

userRoute.js

router.route("/register").post(registerUser);

userReducer.js

export const userSignupReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case REGISTER_USER_REQUEST:
      return {
        loading: true,
        isAuthenticated: false,
      };

    case REGISTER_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload,
      };

    case REGISTER_USER_FAIL:
      return {
        ...state,
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

userAction.js

export const register = (userData) => async (dispatch) => {
  try {
    dispatch({ type: REGISTER_USER_REQUEST });

    const { data } = await axios.post(`/api/v1/register`, userData);

    dispatch({ type: REGISTER_USER_SUCCESS, payload: data.user });
  } catch (error) {
    dispatch({
      type: REGISTER_USER_FAIL,
      payload: error.response.data.message,
    });
  }
};

store.js

...
...
const reducer = combineReducers({
userSignup:userSignupReducer,
});
...
...

Signup.js

import React, { Fragment, useState, useEffect } from "react";
import Loader from "../Loader/Loader";
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from "react-redux";
import { clearErrors, register } from "../../actions/userAction";

const SignUp = () => {
  const dispatch = useDispatch();
  const { error, loading } = useSelector(
    (state) => state.userSignup
  );

  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });

  const { name, email, password } = user;


  const registerSubmit = (e) => {
    e.preventDefault();

    const myForm = new FormData();

    myForm.set("name", name);
    myForm.set("email", email);
    myForm.set("password", password);
    dispatch(register(myForm));
  };

  const registerDataChange = (e) => {
    if (e.target.name === "name" || e.target.name === "email" || e.target.name === "password") {
      setUser({ ...user, [e.target.name]: e.target.value });
    }
  };

  useEffect(() => {
    if (error) {
      alert(error);
      dispatch(clearErrors());
    }
  }, [dispatch, error]);

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <div className="LoginSignUpContainer">
            <div className="LoginSignUpBox">
              <h1 className='logintp'>Signup</h1>
              <h4 className='logintpo'>Please fill in this form to create an account!</h4>
              <form
                className="signUpForm"
                encType="multipart/form-data"
                onSubmit={registerSubmit}
              >
                <div className="signUpName">
                  <input className="nosmart"
                    type="text"
                    placeholder="Name"
                    required
                    name="name"
                    value={name}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpEmail">
                  <input className="nosmart"
                    type="email"
                    placeholder="Email"
                    required
                    name="email"
                    value={email}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpPassword">
                  <input className="nosmart"
                    type="password"
                    placeholder="Password"
                    required
                    name="password"
                    value={password}
                    onChange={registerDataChange}
                  />
                </div>
                <input type="submit" value="Register" className="signUpBtn" />

                <div className='asign'>
                  <h4>Already have an account?</h4> <h4 >
                    <Link className='signupfm' to='/login'> Login</Link>
                  </h4>
                </div>
              </form>
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};
export default SignUp;
? 最佳回答:

你的問題就在這里。。。

const myForm = new FormData();

myForm.set("name", name);
myForm.set("email", email);
myForm.set("password", password);
dispatch(register(myForm));

使用FormData將請求主體發布為multipart/form-data。要處理這樣的請求,您需要像Multer這樣的專業中間件。

通常,除非您正在上載文件,否則您需要處理application/jsonapplication/x-www-form-urlencoded請求主體,并由以下中間件處理它們

app.use(express.json()); // application/json
app.use(express.urlencoded()); // application/x-www-form-urlencoded

要將數據發布為JSON,只需傳入一個普通JavaScript對象

dispatch(register({ name, email, password }));

要將數據發布為urlencoded,請傳入URLSearchParams實例

dispatch(register(new URLSearchParams({ name, email, password })));
主站蜘蛛池模板: 亚洲综合色自拍一区| 无码人妻AⅤ一区二区三区水密桃| 国产精品日韩欧美一区二区三区| 欲色影视天天一区二区三区色香欲 | 国产综合一区二区在线观看| 国产福利酱国产一区二区| 99精品一区二区三区| 99精品高清视频一区二区| 精品一区二区ww| 午夜影院一区二区| 亚洲国产视频一区| 亚洲av无码一区二区三区观看| 国产在线一区二区三区| 久久亚洲中文字幕精品一区| 日韩精品无码人妻一区二区三区 | 91精品福利一区二区三区野战| 一区二区三区在线免费 | 久久4k岛国高清一区二区| 国产精品99无码一区二区| 一区二区三区视频免费观看| 一区二区三区91| 变态拳头交视频一区二区| 精品国产AⅤ一区二区三区4区| 亚洲Aⅴ无码一区二区二三区软件| 国产拳头交一区二区| 国产一区在线播放| 欧洲精品码一区二区三区免费看 | 亚洲毛片αv无线播放一区 | 色婷婷综合久久久久中文一区二区| 成人精品一区二区三区中文字幕| 国产激情一区二区三区| 国产品无码一区二区三区在线蜜桃| 久久久久人妻一区精品 | 免费无码一区二区| 久久亚洲中文字幕精品一区四| 久久亚洲中文字幕精品一区四| 国产人妖视频一区二区| 国产AV一区二区三区无码野战| 3d动漫精品啪啪一区二区免费| 亚洲熟妇成人精品一区| 在线电影一区二区三区|