存储令牌后 LocalStorage 不起作用

Posted 2023-03-10

【中文标题】存储令牌后 LocalStorage 不起作用

【英文标题】：LocalStorage not working after storing token

【发布时间】：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 的仪表板中获得令牌，我正在存储令牌，在这里我收到错误消息说令牌不存在

【参考方案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()
    );