存储令牌后 LocalStorage 不起作用答案

【问题标题】：LocalStorage not working after storing token存储令牌后 LocalStorage 不起作用
【发布时间】：2019-07-04 23:04:58
【问题描述】：

在发送登录成功并路由到下一个组件后，我将 JWT 令牌存储在 LocalStorage 中。但是下一个组件 API 调用无法获取 LocalStored 令牌。

如果我刷新页面并再次单击，它正在接受令牌。不知道问题。

这分别是 Axios Instance 和 Login Dispatch

const instance = axios.create({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        'x-access-token': localStorage.getItem('accessToken'),
    },
    withCredentials: true,
    validateStatus: (status) => status === 200
});

export function checkLogin(data, history) {
    return function (dispatch) {
        return dispatch(makeAPIRequest(loginAPI, data)).then(function (response) {
            if (response.data.success == 1) {
                localStorage.removeItem('accessToken')
                localStorage.setItem('accessToken', response.data.data.token)
                dispatch({ type: STORE_SESSION_TOKEN, authenticated: response.data.data.auth, token: response.data.data.token,userDetails: response.data.data.user });
                history.push('/dashboard')
            }
        })
    }
}

期望从仪表板的下一次调用中从 Localstorage 获取令牌。但这不会发生。说没有令牌并重定向到登录

【问题讨论】：

你什么时候打电话... axios.create ??如您所见， checkLogin 是异步的，所以您可能在获取令牌之前就调用了
是的。我正在调用 axios.create。一旦我从检查登录和路由到我调用 Dashboard API 的仪表板中获得令牌，我正在存储令牌，在这里我收到错误消息说令牌不存在

标签： reactjs jwt local-storage

【解决方案1】：

我认为问题是当您创建 axios 实例时，该令牌在 localStorage 中不可用。

你应该试试 axios 的默认标题：

export const AUTHORIZATION = 'authorization'

export const API = axios.create({
  baseURL: `http://localhost:3000/api`
})

export const authorize = (token) => {
  if (token) {
    API.defaults.headers.Authorization = `Bearer ${token}`
    localStorage.setItem(AUTHORIZATION, token)
  }
}

export const unauthorize = () => {
  delete API.defaults.headers.Authorization
  localStorage.removeItem(AUTHORIZATION)
}

authorize(localStorage.getItem(AUTHORIZATION))

当您在操作中从 API 收到令牌时，您必须将其保存到 localStorage。

【讨论】：

【解决方案2】：

您需要动态获取您的标头，因为创建实例时令牌不存在，以后可能会更改：

const JSON_HEADERS = {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=utf-8'
};

const getTokenFromStorage = () => localStorage.getItem('token');

const getHeaders = () => getTokenFromStorage().then((token) => {
  if (!token) {
    return JSON_HEADERS;
  }
  return {
    ... JSON_HEADERS,
    'x-access-token': token
  };
});

export const makeAPIRequest = ({ method, url, data }) => {
return axios({
      method,
      url,
      data,
      headers: getHeaders()
    });
}

【讨论】：