如何立即`localStorage.getItem`

debugcn 发表于 Dev

亚希帕尔瓦

首先，我使用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 })
};

法兰克·霍丁

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

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

在这里，当js文件捆绑在一起时，令牌将被提取一次，您每次都必须重新提取它：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。