在 React.js 中刷新页面后清除 Axios 默认标头

Question

我在登录组件中设置 axios.defaults.headers.Authorization = MY_TOKEN，该组件在 Authentication 组件中呈现，该组件检查 this.state.loggedin 是否设置为 true。如果为 false，则呈现 Login 组件，如果为 true，则呈现带有 BrowserRouter 的 UserComponent。BrowserRouter 读取“/”路径并导航到 Documents 组件。在此导航页面刷新期间，axios.defaults.headers.Authorization 被清除，返回值未定义。即使页面被刷新，我如何保留 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

将将授权标头设置为始终呈现的组件的逻辑（在我的案例中为导航栏组件）： 接下来是将负责设置授权标头的逻辑移动到我的导航栏组件，通过这样做，它会自动获取从本地存储中获取活动用户的令牌并设置授权标头。现在，无论 react-router 渲染哪个组件，都会不断设置授权标头，从而避免对其他每个组件都这样做。

PS：移动逻辑并不会阻止您最初在登录组件内设置授权标头，它只会解决为每个其他呈现的组件执行此操作的问题。