как мне использовать для перенаправления на другую страницу после аутентификации при входе?

ProgramBox

как мне использовать для перенаправления на другую страницу после аутентификации при входе?

Post author:admin
Запись опубликована:26 мая, 2023
Post category:Вопросы по программированию

#reactjs

Вопрос:

Я делаю проект на Reactjs, и я новичок в нем. Прошло всего несколько дней с тех пор, как я работал над Reactjs. Я хочу перенаправить на новую страницу после успешной аутентификации при входе. Я использую, но это не работает, и, будучи новичком в reactjs, я не могу понять, где я ошибаюсь. Моим условием перенаправления является то, что если оба «valid» и «proceed» = false, то оно перенаправит его на другую страницу. Логические значения для «valid» и «продолжить» получены из http-ответа, и он работает нормально, но перенаправление не работает. Страница остается такой, какая она есть.

Мой компонент sigin: SignInForm.js ->

 import React, { Component } from "react";
import { Link, Redirect } from "react-router-dom";
import axios from "axios";

class SignInForm extends Component {
  state = {
    email: "",
    pass: "",
    proceed: false,
    valid: false
  };
  passwordChange = event => {
    this.setState({ pass: event.target.value });
  };

  emailChange = event => {
    this.setState({ email: event.target.value });
  };

  handleOperation = event => {
    event.preventDefault();
    const user = this.state.email;
    const pwd = this.state.pass;
    console.log(user   "|"   pwd);
    this.setState({
      loading: true
    });
    const data = {
      user,
      pwd
    };
    axios
      .post("https://some end-point where i make my request", data)
      .then(res => {
        console.log(res);
        this.setState({
          proceed: res.data.proceed,
          valid: res.data.valid
        });

        console.log(
          "res pro= "   res.data.proceed   "| res val="   res.data.valid
        );
        console.log(
          "state pro="  
            this.state.proceed  
            "|"  
            "state val = "  
            this.state.valid
        );
        if (!this.state.proceed amp;amp; !this.state.valid) {
          console.log(" In condition");
          return <Redirect to="/Demo" />;
        }
       })

      .catch(err => {
        console.log(err);
      });
  };

   render() {
    return (
       <div className="FormCenter">
        <form className="FormFields">
          <div className="FormField">
            <label className="FormField__Label" htmlFor="email">
               E-Mail Address
             </label>
             <input
              type="email"
              id="email"
              className="FormField__Input"
              placeholder="Enter your e-mail address"
              name="email"
              onChange={this.emailChange}
            />
          </div>

          <div className="FormField">
            <label className="FormField__Label" htmlFor="password">
              Password
            </label>
            <input
              type="password"
              id="password"
              className="FormField__Input"
              placeholder="Enter your password"
              name="password"
              onChange={this.passwordChange}
            />
          </div>

          <div className="FormField">
            <button
              className="FormField__Button mr-20"
              onClick={this.handleOperation}
            >
              Sign In
            </button>
            <Link to="/" className="FormField__Link">
              Create a new account
            </Link>
          </div>
        </form>
      </div>
    );
  }
}
export default SignInForm;`

Демонстрационный компонент:Demo.js ->

 import React, { Component } from "react";
class Demo extends Component {
  render() {
    return <h1>THIS IS A DEMO</h1>;
  }
}
export default Demo;

Ответ №1:

Используйте Redirect при рендеринге, поскольку это компонент. Также задайте начальное состояние для valid amp; proceed в виде строк вместо boolean (в противном случае оно всегда будет перенаправляться, поскольку начальное состояние всегда будет false для обоих) и обновите условие перенаправления, чтобы включить это.

 import React, { Component } from "react";
import { Link, Redirect } from "react-router-dom";
import axios from "axios";

class SignInForm extends Component {
  state = {
    email: "",
    pass: "",
    proceed: "false",
    valid: "false"
  };
  passwordChange = event => {
    this.setState({ pass: event.target.value });
  };

  emailChange = event => {
    this.setState({ email: event.target.value });
  };

  handleOperation = event => {
    event.preventDefault();
    const user = this.state.email;
    const pwd = this.state.pass;
    console.log(user   "|"   pwd);
    this.setState({
      loading: true
    });
    const data = {
      user,
      pwd
    };
    axios
      .post("https://some end-point where i make my request", data)
      .then(res => {

        this.setState({
          proceed: res.data.proceed,
          valid: res.data.valid
        });

       })

      .catch(err => {
        console.log(err);
      });
  };

   render() {
      if ( this.state.proceed===false amp;amp; this.state.valid===false) {
          return <Redirect to="/Demo" />;
      }
      return (
         <div className="FormCenter">
          <form className="FormFields">
            <div className="FormField">
              <label className="FormField__Label" htmlFor="email">
                 E-Mail Address
               </label>
               <input
                type="email"
                id="email"
                className="FormField__Input"
                placeholder="Enter your e-mail address"
                name="email"
                onChange={this.emailChange}
              />
            </div>

            <div className="FormField">
              <label className="FormField__Label" htmlFor="password">
                Password
              </label>
              <input
                type="password"
                id="password"
                className="FormField__Input"
                placeholder="Enter your password"
                name="password"
                onChange={this.passwordChange}
              />
            </div>

            <div className="FormField">
              <button
                className="FormField__Button mr-20"
                onClick={this.handleOperation}
              >
                Sign In
              </button>
              <Link to="/" className="FormField__Link">
                Create a new account
              </Link>
            </div>
          </form>
        </div>
      );
  }
}
export default SignInForm;`

Надеюсь, это поможет! Удачного кодирования.

1. Большое спасибо @HemantParashar. Это перенаправление на мой Demo.js но есть небольшая проблема, она просто отображается путем замены компонента входа (т. Е. поля электронной почты и пароля исчезли, и вместо demo.js отобразите там).

2. @iamayush Да, это ожидаемо, поскольку у вас есть только <h1>THIS IS A DEMO</h1> в вашем демонстрационном файле. Вот как работает маршрутизатор. Он заменяет представление указанным вами компонентом, соответствующим пути. Поддержите ответ, если это помогло.

Ответ №2:

Redirect это компонент, который необходимо отобразить. Кроме того, setState является асинхронным, и поэтому его значение может обновиться не сразу.

 import React, { Component } from "react";
import { Link, Redirect } from "react-router-dom";
import axios from "axios";

class SignInForm extends Component {
  state = {
    email: "",
    pass: "",
    proceed: false,
    valid: false
  };
  passwordChange = event => {
    this.setState({ pass: event.target.value });
  };

  emailChange = event => {
    this.setState({ email: event.target.value });
  };

  handleOperation = event => {
    event.preventDefault();
    const user = this.state.email;
    const pwd = this.state.pass;
    console.log(user   "|"   pwd);
    this.setState({
      loading: true
    });
    const data = {
      user,
      pwd
    };
    axios
      .post("https://some end-point where i make my request", data)
      .then(res => {
        console.log(res);
        this.setState({
          proceed: res.data.proceed,
          valid: res.data.valid
        });

        console.log(
          "res pro= "   res.data.proceed   "| res val="   res.data.valid
        );
        console.log(
          "state pro="  
            this.state.proceed  
            "|"  
            "state val = "  
            this.state.valid
        );
       })

      .catch(err => {
        console.log(err);
      });
  };

   render() {

    if (!this.state.proceed amp;amp; !this.state.valid) {
        console.log(" In condition");
        return <Redirect to="/Demo" />;
    }

    return (
       <div className="FormCenter">
        <form className="FormFields">
          <div className="FormField">
            <label className="FormField__Label" htmlFor="email">
               E-Mail Address
             </label>
             <input
              type="email"
              id="email"
              className="FormField__Input"
              placeholder="Enter your e-mail address"
              name="email"
              onChange={this.emailChange}
            />
          </div>

          <div className="FormField">
            <label className="FormField__Label" htmlFor="password">
              Password
            </label>
            <input
              type="password"
              id="password"
              className="FormField__Input"
              placeholder="Enter your password"
              name="password"
              onChange={this.passwordChange}
            />
          </div>

          <div className="FormField">
            <button
              className="FormField__Button mr-20"
              onClick={this.handleOperation}
            >
              Sign In
            </button>
            <Link to="/" className="FormField__Link">
              Create a new account
            </Link>
          </div>
        </form>
      </div>
    );
  }
}
export default SignInForm;