Реактивная аутентификация не может перенаправить на нужную страницу

Question

Итак, я пытаюсь перенаправить пользователя в / home, если аутентификация прошла успешно, и это так. однако пользователь перенаправляется на /?username=myusername@gmail.com&password=password

в журнале консоли, он печатает

Navigated to http://localhost:3000/?username=myusername@gmail.com&password=password

Я не уверен, почему это происходит, и какая часть кода контролирует это. Я не запустил проект.

Я посмотрел везде, и это не имеет смысла. Кто-нибудь может указать мне, пожалуйста? Спасибо

imports....

class Login extends Component {
  constructor() {
    super();
      this.state = {
        username: '',
        password: '',
        errors: {}
        };
    //binding functions
    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }


  //bind state var with input value
  onChange(e){this.setState({[e.target.name]: e.target.value})}

  onSubmit(e) {

  const user = {
      username: this.state.username,
      password: this.state.password
    }

  async function authenticate() {
.....
.....
.....
      return data;
    }

  if (user.username.length === 0 || user.password.length === 0) {
      notify.show("Access failure with insufficient or empty credentials", "custom", 500, myColor)
      console.log("Access failure with insufficient or empty credentials")
    } else {
    authenticate()
         .then(response =>{
             console.log(response)
        if (response.data.data!==0) {
          console.log("--------------------------------")
          //set the sessionStorage login
          //sessionStorage.setItem("email_logged_in",user.username);
            e.preventDefault();
          this.props.history.push({
            //redirect to home page
            pathname : '/home',
            state :user.username

          })
        }else{
          //show failed notification
          notify.show("login failed ! ", "custom", 500000, myColor)
        }
      })
          //handle errors
          .catch(err => {
            notify.show('Error Authenticating ', "custom", 500000, myColor)
          })
  }
  }

  //rendering the login component
  render() {
    return (
        <div className="container shadow component rounded col-sm-10 col-md-6 p-5 my-5">
          <Notifications />
          <div className="row">
            <div className="col-md-8 mx-auto">
             {/* Login Form*/}
              <form noValidate onSubmit={this.onSubmit}>
                <h1 className="h3 mb-3 font-weight-normal h1 text-center">Please sign in</h1>
                <div className="form-group">
                  <label htmlFor="username">username </label>
                  <input
                      autoComplete="off"
                      type="username"
                      className="form-control  form-styling"
                      name="username"
                      placeholder="Enter username"
                      value={this.state.username}
                      onChange={this.onChange}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="password">Password</label>
                  <input
                      autoComplete="off"
                      type="password"
                      className="form-control form-styling"
                      name="password"
                      placeholder="Password"
                      value={this.state.password}
                      onChange={this.onChange}
                  />
                </div>
                <button
                    type="submit"
                    className="btn btn-lg btn-block btn-signin btn-animate col-md-6 col-sm-8 col-sm-2 offset-md-3 "
                >
                  Sing in
                </button>
              </form>
              {/*End Login Form*/}
            </div>
          </div>
        </div>
    )
  }
}

export default Login

Answer 1

Вы не запрещаете браузеру обрабатывать отправку формы.

Вы не звоните e.preventDefault(), пока не получите ответ на ваш звонок authenticate, после чего браузер уже обработали форму. Форма, в этом случае не имеющая свойств action или method, по умолчанию получает запрос GET по текущему URL-адресу, пропускающий поля формы, что приводит к:

/?username=myusername@gmail.com&password=password

При обработке формы отправка асинхронно, вы должны отменить поведение браузера по умолчанию как можно раньше, чтобы избежать непредвиденного поведения, например

 onSubmit(e) {
   e.preventDefault();
   // do AJAX form post
 }