如何重新导入函数 - reactjs答案

【问题标题】：How to re import a function - reactjs如何重新导入函数 - reactjs
【发布时间】：2021-08-14 17:22:02
【问题描述】：

我创建了一个类来创建 axios api 服务。在这个类中，我从 cookie 中获取令牌（我从服务器获取并将其设置在 cookie 上）。

const api = axios.create({
  headers: {
    common: {
      'Content-Type': 'application/json'
    },
    post: {

    }
  }
});


const cookies = parseCookies()
const token = cookies.token;
if (token && token !== 'undefined') {
  api.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

因为我从上面的组件中导入了这个 api 服务：

import api from "../../../services/httpService";

用户登录后，对于另一个api调用cookie为空。

我想我有两个解决方案：

我将令牌传递给每个 api 调用，例如：

  const config = {
     headers: { Authorization: `Bearer ${cookies.token}` }
 };
  api.get('profile',config).then((res) => {

我不想使用这个解决方案。

重新创建 api 导入（但我不知道该怎么做）。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

登录成功后，为cookies设置令牌。并且您应该在此步骤中更新 axios 实例的令牌。

// ... set token in cookies
api.defaults.headers.common['Authorization'] = 'Bearer ' + token

创建实例时不需要这个逻辑：

const cookies = parseCookies()
const token = cookies.token;
if (token && token !== 'undefined') {
  api.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

【讨论】：