Экспресс игнорирование ошибки 403 при использовании redux + реакции

Question

Redux, или express, кажется, игнорирует ошибку, когда пользователь обновляет свой пароль, когда ему дается токен ссылки сброса пароля.

Это должно отразить эту ошибку

if (this.props.error) {
      return (
        <div>
          <AppBar title={title} />
          <div style={loading}>
            <h4>Problem resetting password. Please send another reset link.</h4>

          </div>
        </div>
      );
    }

Тем не менее, при любом условии, является ли пароль пустым или заполненным, он возвращается успешно, когда не должен.

Это похожий пост, подобный этому

React Redux игнорируетотправляет

и решение должно было быть проблемой с моим бэкэндом, однако для чего-то подобного это кажется правильным.

Может быть, бэкэнд или редукс неправильно отправляются?

бэкэнд

router.put('/updatePassword', (req, res, next) => {
  passport.authenticate('jwt', { session: false }, (err, user, info) => {
    if (err) {
      console.log(err);
    }
    if (info != undefined) {
      console.log(info.message);
      res.status(403).send(info.message);
    } else {
      models.User.findOne({
        where: {
          username: req.body.username,
        },
      }).then(user => {
        if (user != null) {
          console.log('user found in db');
          bcrypt
            .hash(req.body.password, BCRYPT_SALT_ROUNDS)
            .then(hashedPassword => {
              user.update({
                password: hashedPassword,
              });
            })
            .then(() => {
              console.log('password updated');
              res
                .status(200)
                .send({ auth: true, message: 'password updated' });
            });
        } else {
          console.log('no user exists in db to update');
          res.status(404).json('no user exists in db to update');
        }
      });
    }
  })(req, res, next);
});

Front End

class ResetPassword extends Component {
  constructor() {
    super();

    this.state = {
      username: '',
      password: '',
      confirmPassword: '',
      update: false,
      isLoading: true,
      error: false,
    };
  }

async componentDidMount() {

  // this.props.Reset();
    await axios
      .get('/api/users/reset', {
        params: {
          resetPasswordToken: this.props.match.params.token,
        },
      })
      .then(response => {
        console.log(response);
        if (response.data.message === 'password reset link a-ok') {
          this.setState({
            username: response.data.username,
            update: false,
            isLoading: false,
            error: false,
          });
        }
      })
      .catch(error => {
        console.log(error.response.data);
        this.setState({
          update: false,
          isLoading: false,
          error: true,
        });
      });
  }

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  updatePassword = e => {
    e.preventDefault();
    const {username, password} = this.state;

    const creds = {
      username, password
    }

    if(password != null){
      this.props.updatePass(creds);
    }
    else{
      console.log('enter an email')
    }

    // axios
    //   .put('/api/users/updatePasswordViaEmail', {
    //     username: this.state.username,
    //     password: this.state.password,
    //   })
    //   .then(response => {
    //     console.log(response.data);
    //     if (response.data.message === 'password updated') {
    //       this.setState({
    //         updated: true,
    //         error: false,
    //       });
    //     } else {
    //       this.setState({
    //         updated: false,
    //         error: true,
    //       });
    //     }
    //   })
    //   .catch(error => {
    //     console.log(error.data);
    //   });
  };

  render() {
    const { password, error, isLoading, updated } = this.state;

    if (this.props.error) {
      return (
        <div>
          <AppBar title={title} />
          <div style={loading}>
            <h4>Problem resetting password. Please send another reset link.</h4>

          </div>
        </div>
      );
    } else if (this.props.isLoading) {
      return (
        <div>
          <div style={loading}>Loading User Data...</div>
        </div>
      );
    } else {
      return (
        <div className="App" style={Styles.wrapper}>
         <h1> Update Password</h1>

         {this.props.updated && (
            <div>
              <p>
                Your password has been successfully reset, please try logging in
                again.
              </p>

            </div>
          )}

          <form className="password-form" onSubmit={this.updatePassword}>
            <TextField
              id="password"
              label="password"
              style={Styles.textF}
              onChange={this.handleChange('password')}
              value={password}
              type="password"
            />
          <br></br>
          <br></br>
          <Button color="primary" variant="outlined" type="submit">
            Update Password
         </Button>
          </form>


        </div>
      );
    }
  }
}

const mapStateToProps = (state) => ({
  // token: state.user.getToken, 
  // error: state.post.postError
  // showError: state.account.showError,
  // messageFromServer: state.account.messageFromServer
  updated: state.account.update,
  isLoading: state.account.isLoading,
  error: state.account.error


})
const mapDispatchToProps = (dispatch) => ({
  Reset: () => dispatch(Reset()),
  updatePass: (creds) => dispatch(updatePass(creds))
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ResetPassword));

Действия Redux

export const updatePass = (creds)  => {
    return  (dispatch) =>{
        axios.put('/api/users/updatePasswordViaEmail', {
            username: creds.username,
            password: creds.password,
        }).then(response => {
            // console.log(creds.username);
            console.log(response);
            if (response.data.message === 'password updated') {
                dispatch({type:UPDATEPASS, creds});     
            }

         }).catch(err => {

            dispatch({type:UPDATEPASS_FAIL, err});  


         });
    }
}

Редуктор

case UPDATEPASS:
            return({
                ...state,
                update:true,
                error: false

            });
        case UPDATEPASS_FAIL:
            return({
                ...state, 
                update: false,
                error: true,
            })

Answer 1

Проблема в компоненте ResetPassword.Вы устанавливаете начальное значение password как пустую строку.Из-за этого всегда будет верно следующее:

if (password != null) {
    this.props.updatePass(creds);
}

Чтобы исправить проблему, убедитесь, что password не пустая строка:

if (password !== '') {
    this.props.updatePass(creds);
}