Как работать с пользователем, зарегистрированным в состоянии в React JS и Firebase?

Question

Я занимаюсь разработкой веб-приложения с использованием React JS и Firebase. Я хочу, чтобы в моем приложении работало следующее поведение.

На странице входа есть флажок «Сохранить меня в системе». Если пользователь НЕ пометил этот флажок, пользователь должен автоматически выйти из системы при закрытии вкладки / браузера. Если пользователь пометил флажок «Оставить меня в системе», он не выйдет из системы, если пользователь не нажмет кнопку «Выйти» на панели инструментов. Кроме того, пользователь должен быть перенаправлен на страницу Dashboard, если пользователь вошел в систему. Если пользователь не вошел в систему, пользователь должен быть перенаправлен на страницу входа.

И пользователь не должен быть в состоянии go к страницам, вводя URL-адреса вручную.

Вот часть моего текущего индекса. js file.

const browserHistory = createBrowserHistory();

firebase.auth().onAuthStateChanged(user => {
  user ? browserHistory.push("/dashboard") : browserHistory.push("/signin");
});

ReactDOM.render(
  <Router history={browserHistory}>
    <Switch>
      <Theme>
        <Route exact path="/signin" component={SignIn} />
        <Route path="/dashboard" component={Dashboard} />
        <Redirect to="/" />
      </Theme>
    </Switch>
  </Router>,
  document.getElementById('root')
);

Здесь моя проблема в том, пользователь может go вернуться после перенаправления. Я думаю, что это неправильный способ сделать это.

Итак, пожалуйста, помогите мне сделать это поведение. Ответ с примером кода очень ценится.

Answer 1

history.replace является функциональным эквивалентом Redirect компонента.

replace(path, [state]) - (функция) Заменяет текущую запись в стеке истории

firebase.auth().onAuthStateChanged(user => {
  browserHistory.replace(user ? "/dashboard" : "/signin");
});

При успешном входе в систему вы также, вероятно, захотите сделать еще одно перенаправление на панель управления.