如何在渲染后立即调用`localStorage.getItem`

Question

首先我使用localStorage.setItem 保存我从 api 获取的令牌并将其设置为我的 axios 中的标头

我需要使用local.storage.getItem() 读取数据，然后将其设置为标题
所以还有另一个发送请求的操作，获取令牌并将其保存到本地存储 localStorage.setItem() 并将浏览器历史记录替换到我调用需要令牌的操作的位置，但它显示 404 错误和唯一的第一个错误这意味着只有第一次，如果我关闭页面并再次打开它就可以正常工作
我会一步一步展示代码

这是我要使用令牌的代码

import axios from 'axios';
const token =  localStorage.getItem('token')//here doesn't get it and shows 404 error from API i refresh the page for second time or after 
export default axios.create({

  headers:{"Authorization": `Bearer ${token}`}
})

这是我的操作，我使用不同的 axios 实例获取令牌，它没有 header

export const sendCode = (phone, code) => async dispatch => {
  dispatch({ type: LOADING_STATE })

  const response =
    await loginApi.post(baseurl + "Auth/Checkcode", {
      phone: phone,
      code: code
    },
    )
  dispatch({ type: SEND_CODE, payload: response.data });
  if (response.data.success === true) {
    history.replace('/home')
   localStorage.setItem("token", response.data.obj.token)
  }

最后是我用具有header的实例调用它的操作

export const getHomeInfo = () => async dispatch => {
  dispatch({type:LOADING_STATE})
 const response = await homeAPI.get(baseurl + "Home/GetList")//homeAPI is the instance that has header

  dispatch({ type: GET_HOME_INFO, payload: response.data })
};

Answer 1

import axios from 'axios';
const token =  localStorage.getItem('token')
export default axios.create({

  headers:{"Authorization": `Bearer ${token}`}
})

这里，在打包js文件时会获取一次token，每次都要重新获取一次：

import axios from 'axios';


const getHeaders = () => {
  const token = localStorage.getItem('token')
  return {"Authorization": `Bearer ${token}`}
}

export default axios.create({
  headers: getHeaders()
})

编辑：上面的代码不起作用，因为 axios.create() 只被调用一次，如果你需要动态标题，你应该添加一个拦截器，它将在每个请求之前调用：

const axiosInstance = axios.create()

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error),
);

export default axiosInstance