无论在寄存器中输入啥，使用 react-redux 和 jwt 都会出现“请输入所有字段错误”

Posted 2023-03-10

【中文标题】无论在寄存器中输入啥，使用 react-redux 和 jwt 都会出现“请输入所有字段错误”

【英文标题】：Getting "Please enter all fields error" no matter what is entered in register, using react-redux and jwt无论在寄存器中输入什么，使用 react-redux 和 jwt 都会出现“请输入所有字段错误”

【发布时间】：2020-12-18 09:13:35

【问题描述】：

我正在使用 react-redux、axios 和 JWT 为我构建的一个简单的 Web 应用程序创建一个注册系统。无论输入什么，我都会收到“请输入所有字段错误”。我编写了其他错误，即使所有输入都有效，我也会得到相同的错误。我在开发工具或终端中都没有看到任何编译错误。这是我第一次尝试身份验证/注册。

This is my registerModal:

    class RegisterModal extends Component

    state = 
        Modal: false,
        name: '',
        email: '',
        password:'',
        msg: null
    
    static propTypes =
        isAuthenticated: PropTypes.bool,
        error: PropTypes.object.isRequired,
        register: PropTypes.func.isRequired,
        clearErrors: PropTypes.func.isRequired
    
    componentDidUpdate(prevProps)
        const error = this.props;
        if(error !== prevProps.error)
            //reg error
            if(error.id === 'REGISTER_FAIL')
                this.setState(msg: error.msg.msg)
            else
                this.setState(msg: null);
            
         
    
    toggle = () =>
        this.props.clearErrors();
        this.setState(
            Modal: !this.state.Modal
        
        );
    
    onChange = (e)=>
        this.setState(
            [e.target.name]: e.target.value
            );
    
    onSubmit = e =>
        e.preventDefault();
        constname, email, password = this.state;
        //create user object
        const newUser = 
            name,
            email,
            password
        ;
        this.props.register(newUser);
        
    

    render()
        return(
        <div>
        <NavLink onClick = this.toggle href ="#" color = "danger">
            Register
            </NavLink>
        <Modal 
            isOpen=this.state.Modal
            toggle=this.toggle >
            <ModalHeader toggle=this.toggle>Register</ModalHeader>  
            <ModalBody>
            this.state.msg ? <Alert color = "danger">this.state. msg</Alert>: null
                <Form onSubmit = this.onSubmit>
                    <FormGroup>
                        <Label for ="name">Name</Label>
                        <Input
                            type = "text"
                            name= "name"
                            id = "name"
                            placeholder="Name"
                            onChange = this.onChange>
                        </Input>

                    </FormGroup>
                    <FormGroup>
                        <Label for ="Email">Email </Label>
                        <Input
                            type = "email"
                            name= "email"
                            id = 'email'
                            placeholder="Enter email"
                            onChange = this.onChange>
                        </Input>

                    </FormGroup>
                    <FormGroup>
                        <Label for ="Password">Password</Label>
                        <Input
                            type = "password"
                            name= "password"
                            id = "password"
                            placeholder="Password"
                            onChange = this.onChange>
                        </Input>

                    </FormGroup>
                        
                        <Button
                        color="success"
                        style=marginTop:'2rem'
                        block>
            Register</Button>
                </Form>
            </ModalBody>
        </Modal>
        </div>

        );
    


const mapStateToProps = (state) => (
    isAuthenticated: state.auth.isAuthenticated,
    error: state.error
);
export default connect(
    mapStateToProps,
    register, clearErrors)(RegisterModal);

这是在我的路由文件夹中的 auth.js 文件中：

//POST api/auth
//@desc Auth user

router.post('/', (req, res)=> 
   const  email, password  = req.body;

   //validation
   if(!email || !password)
       return res.status(400).json(msg: 'Please enter all fields');
   

   //Check for existing user
   User.findOne(email)
   .then(user =>
       if(!user) return res.status(400).json(msg: 'User does not exists')
      
    //Validate password
    bcrypt.compare(password, user.password)
    .then(isMatch =>
        if(!isMatch) return res.status(400).json( msg: 'Invalid credentials');
        jwt.sign(
            id: user.id,
            config.get('jwtSecret'),
            expiresIn: 3600,
            (err, token) => 
                if(err) throw err; 
                res.json(
                    token,
                    user: 
                        id: user.id,
                        name: user.name,
                        email: user.email
                    
                );
            
        )

    )
       
   );
);

authActions.js：

//check tokens and register user

export const loadUser = () => (dispatch, getState) => 
    //user loading
    dispatch(type: USER_LOADING);

    axios.get('/api/auth/user', tokenConfig(getState))
        .then(res => dispatch(
            type: USER_LOADED,
            payload: res.data
        ))
        .catch(err => 
            dispatch(returnErrors(err.response.data, err.response.status));
            dispatch(
                type: AUTH_ERROR
            );
        );




export const register = (name, email, password) => dispatch =>
    //headers
    const config = 
        header: 
            'Content-Type': 'application/json'
        
    

    //request body

    const body = JSON.stringify(name, email, password);
    axios.post('/api/users', body, config)
    .then(res => dispatch(
        type: REGISTER_SUCCESS,
        payload:res.data
    ))
    .catch(err=>
        dispatch(returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL'));
        dispatch(
            type: REGISTER_FAIL
        )
    )

//setup config /header and token
export const tokenConfig = getState => 
        //get token from local storage
        const token = getState().auth.token;

        //headers
        const config = 
            headers: 
                "Content-type": "application/json"
            
            
        
    
        //if token add to headers
        if(token)
            config.headers['x-auth-token'] = token;
    
    return config;

如果我应该添加任何内容，请告诉我。

【问题讨论】：

请提供其余相关代码。即您可能在“AuthActions”文件中拥有的register() 函数。我们需要看看 API 调用是什么样子的。

我添加了 authActions 文件。

您从 auth.js 提供的路由不是用于注册 - 它是用于令牌验证。如果您添加您正在点击的 register (/api/users) 路由，我可以进一步帮助您。此外，在您的 AuthActions.js register 操作中，config 中的“header”应该是“headers”。

【参考方案1】：

假设您的注册路由正确处理请求，将您传递到 register 操作的 axios.post() 的 config 中的“header”更改为“headers”应该可以解决它。