Как ждать, пока браузер сохранит данные в локальном хранилище?[ReactJs]

Question

Когда пользователь входит в систему, я сохраняю его данные в sessionStorage.На своей домашней странице я проверяю, является ли sessionStorage пустым или нет, с помощью componentDidMount ().Если данных нет, следует перенаправить пользователя на страницу входа, в противном случае продолжить.Проблема заключается в том, что на странице входа в систему нажата кнопка Вход в систему. Метод componentDidMount () на домашней странице вызывается до того, как браузер сохраняет данные пользователя в своем sessionStorage (так как данных в локальном хранилище еще нет, пользователь не может быть перенаправлен на домашнюю страницу, покаон обновляет страницу).Как мне ждать, пока браузер сохранит данные в sessionStorage?

Страница входа

handleSubmit = e => {
    e.preventDefault();
    axios.post('url', { userId: e.target.elements.userId.value,
    password: e.target.elements.password.value })
    .then((response) => {
      if(response.status=200){
        this.setState({ loggedIn: true });
        let responseJSON = response;
        sessionStorage.setItem("userData", responseJSON);
      } else {
        console.log("Log In Error");
      }
    }).catch((error) => {
      console.log(error);
      this.setState({ loggedIn: false });
    });
};

Домашняя страница

componentDidMount() {
      if( sessionStorage.getItem('userData') ){
        console.log('User Logged In');
      } else {
        this.setState({redirect: true})
      }
}

Answer 1

Вы можете связать и прослушивать события в веб-хранилище внутри вашего componentDidMount метода.

Имейте в виду, что это работает только для изменений, произошедших в пределах одной вкладки или фрейма.

window.addEventListener('storage', function (e) {
  if (e.storageArea === sessionStorage) {
    // handle change here
  }
});