Заголовки Axios по умолчанию очищаются после обновления страницы в React.js

Question

Я устанавливаю axios.defaults.headers.Authorization = MY_TOKEN в компоненте Login, который отображается в компоненте Authentication, который проверяет, установлено ли для this.state.loggedin значение true.Если false, он отображает компонент Login, если true, он отображает UserComponent с BrowserRouter.BrowserRouter читает «/» путь и переходит к компоненту Documents.Во время этой навигации страница обновляется и axios.defaults.headers. Авторизация очищается, возвращая значение undefined.Как я могу сохранить axios.defaults.headers, даже если страница обновлена, или я должен инициализировать заголовки по умолчанию каждый раз, когда маршрутизатор переходит на другой компонент?

ОБНОВЛЕНИЕ

Добавлен некоторый кодкак происходит рендеринг в Authentication.js

      render() {
      return (
        <UserNavigationContainer
          {...this.props}
          logout={this.onClickLogoutHandler}
        />
      );
     }

UserNavigationContainer.js выполняет рендеринг (не полный код)

<BrowserRouter>
      <div>
        <UserNavigationComponent {...this.props}>
          <Switch>
            <Route
              exact
              path="/"
              component={UserSubmittedDocumentsContainer}
            />

Так что на самом деле, когда UserNavigationContainer рендерится, он переходит на "/" и обновляет страницуво время навигации.

Answer 1

У меня был похожий опыт, и вот как я смог его решить

Сохранение токена в локальном хранилище при входе / регистрации пользователя: Первым шагом было сохранение токена пользователя влокальное хранилище при успешном входе в систему / регистрации вы можете прочитать API локального хранилища браузера здесь

переместить логику, которая устанавливает заголовок авторизации для компонента, который всегда отображается независимо от текущего пути(Компонент панели навигации в моем случае): Следующим шагом было перемещение логики, отвечающей за установку заголовка авторизации, в мой компонент панели навигации, при этом он автоматически выбирает токен активного пользователя из локального хранилища и устанавливает заголовок авторизации.теперь независимо от того, какой компонент рендерит на реагирующем маршрутизаторе, заголовок авторизации постоянно устанавливается, избегая необходимости делать это для каждого другого компонента.

PS : перемещение логики неостановите первоначальную настройку заголовка авторизации внутри компонента входа в систему, это решает проблему только для всех остальных компонентов, которые отображаются.