Question

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

如果我刷新页面并再次单击，则表示它接受令牌。不知道这个问题。

这分别是Axios实例和登录调度

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获取令牌。但这不会发生。说没有令牌，并重定向到登录

Answer 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。

Answer 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()
    });
}

存储令牌后LocalStorage无法正常工作

2 个答案: