Добавление токена авторизации в заголовки?

Question

[Андрей Охотников]

Как правильно реализовать передачу токена авторизации в REST API?

1) Добавлять токен только к тем запросам которые требуют авторизации
2) Добавлять токен ко всем запросам

Answer 1

[Антон Спирин]

На примере axios:

axios.defaults.headers.common.Authorization = `Bearer ${token}`;

Если надо добавлять только к авторизованным, то можно написать обертку, ну или отдельный инстанс создать.

Comments

[Андрей Охотников]

Вот такой вариант функции для получения данных годный?

const get = (url, options = {}) => axios.get(`${API_URL}/${url}`, {
    ...options,
    headers: { Authorization: `Bearer ${getFromLocalStorage('token')}` }
  });

Таким образом токен получается в момент вызова функции

[Антон Спирин]

Андрей Охотников, ну на самом деле не вижу смысла не поставить в данном случае заголовок по-умолчанию.
Еще axios позволяет устанавливать baseURL:
axios.defaults.baseURL = API_URL;

Ну на крайняк, если это действительно зачем-то надо, можно сделать так:

const getDefaultHeaders = () => ({
  Authorization: `Bearer ${getFromLocalStorage('token')}`,
});

const get = (url, options = {}) => {
    
  const headers = options.headers ?
    { ...options.headers, ...getDefaultHeaders() } : getDefaultHeaders();
 
  return axios.get(`${API_URL}/${url}`, {
    ...options,
    headers,
  });
};

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

[Андрей Охотников]

В таком случае получается что в getDefaultHeaders при импорте функции get нет токена, я имортирую функицю без него, потом токен добавляется в localstorage и вызывается функция get, но в ней то токена нет

[Антон Спирин]

Андрей Охотников, что-то на каком-то этапе неправильно делаете. Демо.

Answer 2

[Robur]

Можно и так и так.
по дефолту делайте вариант 2.
вариант 1 если есть какие-то конкретные причины так делать и вы их знаете