Javascript 使用redux+；时表示忽略403错误；反应

当用户在收到重置密码链接令牌后更新密码时，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>
      );
    }

前端

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);
});

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));

减速器

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

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

---

问题出在

ResetPassword

组件中。将

password

的初始值设置为空字符串。因此，以下情况始终是正确的：

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

要解决您的问题，请检查密码是否不是空字符串：

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

---

让我试试这个。这个很好用。但是我如何在redux dispatch action中输入一封电子邮件，这是一个不同的问题。简而言之，您可以将

errorMessage

添加到reducer为操作返回的状态

UPDATEPASS\u FAIL

：

{…状态，更新：false，错误：true，errorMessage:'your message'}

。然后可以在组件中使用该消息。

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