reactjs - React.js 页面刷新后，Axios 默认 header 被清除

Question

我在登录组件中设置 axios.defaults.headers.Authorization = MY_TOKEN，该组件在身份验证组件中呈现，该组件检查 this.state.loggedin 是否设置为 true。如果为 false，则呈现 Login 组件，如果为 true，则使用 BrowserRouter 呈现 UserComponent。 BrowserRouter 读取“/”路径并导航到文档组件。在此导航页面刷新期间，axios.defaults.headers.Authorization 被清除，返回未定义的值。即使刷新页面，如何保留 axios.defaults.headers 或者每次路由器导航到其他组件时都应该初始化默认 header ？

更新

添加了一些如何在 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

我有类似的经历，以下是我如何解决它

在用户登录/注册时将 token 保留到本地存储: 第一步是在登录/注册成功后将用户 token 保存到本地存储，您可以在浏览器的本地存储 API here 上进行阅读

将设置授权 header 的逻辑移动到无论当前路径如何都始终呈现的组件(在我的例子中是导航栏组件): 接下来是将负责设置授权 header 的逻辑移动到我的导航栏组件，通过这样做，它会自动从本地存储中获取事件用户的 token 并设置授权 header 。现在，无论react-router渲染哪个组件，都会不断地设置授权 header ，从而避免了对每个其他组件都这样做的需要。

PS:移动逻辑并不会阻止您最初在登录组件内设置授权 header ，它只是解决了为渲染的每个其他组件执行此操作的问题。