Как открыть домашнюю страницу после успешной авторизации в реактиве?

Question

При успешном входе в систему он перенаправляет меня на главную страницу, но когда я захожу в браузер и открываю http://localhost:3000/MainPage, он показывает мне главную страницу (на самом деле он должен перекинуть меня на страницу входа, потому что я не вошел в систему).В моем случае я могу получить доступ к главной странице без входа в систему с помощью URL.Что я должен сделать, чтобы перенаправить незарегистрированных пользователей на страницу входа в систему?

В моем LogIn.js я устанавливаю состояние loggedIn в ложь

App.js

class App extends Component {
render() {
return (
  <BrowserRouter>
   <Switch>
        <Route exact path="/" component={ LogIn }></Route>
        <Route path='/' component={ MainPage }></Route>
   </Switch>
  </BrowserRouter>
);
}
}

export default App; 

LogIn.js

const userIdRegex = RegExp(
/^[uU]*1+[0-9]*$/
);

class LogIn extends Component {

constructor(props) {
super(props);

this.state = {
  userId: null,
  password: null,
  fullName: undefined,
  responseError: false,
  loggedIn: false,
  formErrors: {
    userId: "",
    password: ""
  }
};
}

 handleSubmit = e => {
  e.preventDefault();

  axios.post('url', { 
   userId: 
  e.target.elements.userId.value,
  password: e.target.elements.password.value })
    .then((response) => {
      console.log(response);
      this.setState({ fullName: response.data.fullName, loggedIn: true });
      console.log(this.state.fullName);
      console.log(this.state.loggedIn);
    }).catch((error) => {
      console.log(error);
      this.setState({ responseError: true });
    });

  };
  handleChange = e => {
e.preventDefault();
const { name, value } = e.target;
let formErrors = { ...this.state.formErrors };

switch (name) {

  case "userId":
    formErrors.userId = userIdRegex.test(value)
      ? ""
      : "Invalid user ID";
    break;
  case "password":
    formErrors.password =
      value.length < 8 ? "Invalid password" : "";
    break;
  default:
    break;
}

this.setState({ formErrors, [name]: value }, () => 
  console.log(this.state));
  };
 render() {
const { formErrors } = this.state;
const responseError = this.state.responseError;
// const loggedIn = this.state.loggedIn;
// const { from } = this.props.location.state || '/';
if (this.state.loggedIn == true) {
  return <Redirect to="./MainPage" />;
}
return (
  <div className="wrapper">
    <div className="form-wrapper">
    <img src={Logo} className="App-logo" alt="Logo" />
    <p>To Log In enter your user ID and password.</p>
      <form onSubmit={this.handleSubmit} noValidate>      
        <div className="userId">
          <input
            autoFocus
            className={formErrors.userId.length > 0 ? "error" : null}
            placeholder="User ID"
            type="text"
            name="userId"
            noValidate
            defaultValue="u"
            onChange={this.handleChange}
          />
          {formErrors.userId.length > 0 && (
            <span className="errorMessage">{formErrors.userId}</span>
          )}
        </div>
        <div className="password">
          <input
            className={formErrors.password.length > 0 ? "error" : null}
            placeholder="Password"
            type="password"
            name="password"
            noValidate
            onChange={this.handleChange}
          />
          {formErrors.password.length > 0 && (
            <span className="errorMessage">{formErrors.password}</span>
          )}
        </div>
        <div className="createAccount">
          <button type="submit" disabled={!this.state.userId} disabled= 
 {!this.state.password}>Log in</button>
        </div>
      </form>
      { responseError==true && (
        <span className="response-error errorMessage">Please enter valid 
  user values</span>
      ) }
    </div>

  </div>
  )}
 }

export default LogIn;

MainPage.js

class MainPage extends Component {
state = {
    loggedIn: false
}

render(){
    if (this.state.loggedIn) {
        return <Redirect to="/" />;
    }
    console.log(this.state);
    return(
    <div>
        <p>Welcome</p>
    </div>

    );
}
}
export default MainPage;

Answer 1

Хорошим подходом было бы создание пользовательского маршрута для обработки, если пользователь авторизован, а если он не аутентифицирован, вы перенаправляете на страницу входа.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route { ...rest }
    render={props => {
      if ( isLogged()  ) {
           return <Component {...props} />;
      } else {
          return <Redirect to={{pathname:'/login'}} />;
      }
    }}
  />
);

Answer 2

Кажется, что у вас есть обратная сторона в вашем компоненте main.js.В заявлении if вы захотите проверить! This.state.loggedIn, а затем использовать

<Redirect to=‘’./LoginPage”/>

, как вы это делали в компоненте входа в систему.Проблема, которую я вижу здесь (и, возможно, я что-то упускаю), заключается в том, что состояние StatePloggedIn MainPage будет установлено в значение false, даже когда оно перенаправляется из после входа в систему.Вы можете передать переменную loggedIn из LoginPage в MainPage, используя

<Redirect to={{pathname: “./MainPage”,  state: {loggedIn: this.state.loggedIn}}} \>

Затем вы можете получить доступ к тому, действительно ли пользователь вошел в систему с помощью this.props.location.state.loggedIn в компоненте MainPage.

То, как вы в настоящее время используете его на главной странице, так как для state.loggedIn по умолчанию задано значение false, и если вы проверяете, является ли условие loggedIn истинным или нет, то будет иметь смысл, что оно никогда не сработает.