Реагировать - Перенаправить пользователя для входа, если не зарегистрировано, иначе идти вперед

Question

Запустить компонент App рендеринг Wellcome компонента, который далее визуализирует Login компонент.

Это маршруты от Router:

   <Route exact path={"/welcome"} component={App} />
   <Route exact path={"/"} component={Dashboard} />

В Dashboard компоненте, у меня есть эта проверка:

componentWillMount() {
    if (!sessionStorage.getItem('token_object')) {
        this.props.history.push('/welcome');
    }
}

render() {
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}

Когда я нажимаю http://localhost:myPort/ в адресной строке, он должен попытаться отобразить компонент Dashboard и завершиться неудачей из-за того, что "if (!sessionStorage.getItem('token_object')) {" предполагает, что пользователь не вошел в систему. Но это не удается, он просто устанавливает URL в браузере на http://localhost:myPort/welcome, но продолжает отображать Dashboard компонент и завершается ошибкой. Что не так?

Answer 1

Вы должны использовать условный рендеринг.

Посмотрите этот пример по реакцииjs.org:

.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

Answer 2

Есть и другие способы получить эти проверки, такие как «компоненты более высокого порядка» или другие приемы. Но давайте сосредоточимся на приведенном выше примере и рефакторинг его

render() {
    const isLogged = !!sessionStorage.getItem('token_object'));

    if (!isLogged) {
        return (
            <Redirect to="/welcome" />
        )
    }
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}

Примечания:

• !! для получения логического значения, если токен установлен или нет
• возврат компонента Redirect из redux-router-dom, если пользователь не зарегистрирован

Answer 3

Всегда старайтесь регистрировать значение sessionStorage и даже window.sessionStorage.

Помните, что обычно sessionStorage будет доступен для componentDidMount.

Прочтите этот ответ , чтобы лучше понять, как работает sessionStorage.

Помните, что sessionStorage недоступен при рендеринге на стороне сервера.

Answer 4

Здесь вы просто обновляете адресную строку браузера здесь, не используя логику React-router для рендеринга компонентов так, как вам нужно.

Вы можете использовать компонент <Redirect /> реагирующего маршрутизатора для достижения своей цели.

Вот одно из возможных решений при условии, что компонент Dashboard установлен внутри компонента Router:

render() {
    if (!sessionStorage.getItem('token_object')) {
        return <Redirect to={'/welcome'} />;
    }
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}