LocalStorage не работает после хранения токена - PullRequest
Новая
       28

LocalStorage не работает после хранения токена

0 голосов
/ 11 февраля 2019

Я храню токен 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')
            }
        })
    }
}

Ожидается получение токена из Localalstorage с самого следующего вызова из Dashboard.Но этого не происходит.не говорит токен и перенаправляет на логин

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Вам необходимо получить заголовок динамически, поскольку токен отсутствует при создании экземпляра и может измениться позже: 

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()
    });
}
0 голосов
/ 11 февраля 2019

Мне кажется, проблема в том, что при создании экземпляра 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.

...