时间戳

首页 > 解决方案 > 在 React.js 中页面刷新后清除 Axios 默认标头

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

问题描述

我在 Login 组件中设置 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 被渲染时，它会导航到“/”并在导航时刷新页面。

标签： reactjsaxios

解决方案

我有类似的经历，这就是我能够解决的方法

在用户登录/注册时将令牌持久保存到本地存储： 第一步是在登录/注册成功后将用户令牌持久保存到本地存储，您可以在此处阅读浏览器的本地存储 API

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

PS：移动逻辑并不会阻止您最初在登录组件中设置授权标头，它只会解决为每个其他被渲染的组件这样做的问题。

推荐阅读