Как хранить токен в React

Я сохранил токен в localStorage:

localStorage.setItem('token', response.data.token)

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

const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
}

при запуске проекта, если токен существует, axios отправляет токен в каждом запросе, но когда я добавляю токен после запуска проекта, axiost не отправляет токен, могу ли я обновить конфигурацию по умолчанию после запуска проекта?

Я очень рекомендую вам прикрепить заголовок в перехватчике запросов. У меня никогда не было проблем с этим.

Baruch 21.12.2018 12:05

Вы должны запустить axios.defaults.headers.common['Authorization'] = 'Bearer ' + token; в момент добавления токена, если он не существовал при загрузке страницы, хотя перехватчик запросов, вероятно, является лучшим решением.

apokryfos 21.12.2018 12:30

Я использую перехватчик запросов, и он работает, спасибо, парень.

Masoud92m 21.12.2018 15:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
1 357
1

Ответы 1

это моя абстракция запроса Axios, это позволяет добавлять или изменять токен аутентификации в любое время:

import axios from 'axios';
import { API } from '../../constants';
import { store } from '../../../configureStore';

import { revokeAuthAction } from '../../../containers/Auth/actions';

export const getAuth = () => {
  const sessionString = localStorage.getItem('session');
  let auth;
  if (sessionString) {
    const session = JSON.parse(sessionString);
    auth = `${session.nation}|${session.user}|${session.token}`;
  }
  return auth;
};

/**
 * Create an Axios Client with defaults
 */
const client = axios.create({
  baseURL: API.BASEURL,
  headers: {
    Authorization: getAuth(),
    'Access-Control-Max-Age': 1728000,
  },
});

/**
 * Request Wrapper with default success/error actions
 */
const request = (options) => {
  const onSuccess = (response) => options.raw ? response : response.data;
    // console.debug('Request Successful!', response);
    // If options.raw is true, return all response

  const onError = (error) => {
    // console.error('Request Failed:', error.config);

    if (error.response) {
      if (error.response.status === 401) {
        // console.error('Unauthorized');
        store.dispatch(revokeAuthAction());
      } else {
        // Request was made but server responded with something
        // other than 2xx
        // console.error('Status:', error.response.status);
        // console.error('Data:', error.response.data);
        // console.error('Headers:', error.response.headers);
      }
    } else {
      // Something else happened while setting up the request
      // triggered the error
      // console.error('Error Message:', error.message);
    }

    return Promise.reject(error.response || error.message);
  };

  return client(options)
    .then(onSuccess)
    .catch(onError);
};

export default request;

Использование:

import request from '../../../../shared/lib/request';

[...]

const create = (content) => request(
  {
    url: API.MY_ENDPOINT,
    method: 'POST',
    data: content,
  });

Другие вопросы по теме