Как я могу сохранить JWT в куки, используя Axios?

Question

Я использую JWT в своем приложении React и Axios для обработки вызовов API.Я ищу способ сохранить токен в файлах cookie, чтобы при каждом обновлении браузера меня не перенаправляли на повторный вход в систему.

Вот мои настройки для Axios и мой входящий вызов:

let authToken = null; 

const axios = axiosAPI.create({
    baseURL: baseURL
});

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};

Я не уверен, где я должен установить cookie и как его настроить?

РЕДАКТИРОВАТЬ:

Я переписал свой код с помощью js-cookie, чтобы он выглядел как комментарий.

import axiosAPI from 'axios';
import Cookies from 'js-cookie';

let authToken = null;

const axios = axiosAPI.create({
    baseURL: `${baseURL}`
});

// Check if user is logged in.
(function () {
    if (Cookies.get('token') === null) {
        // This means that there's no JWT and no user is logged in.
        axios.defaults.headers.common.Authorization = null;
    } else {
        // This means that there's a JWT so someone must be logged in.
        axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
    }
}());

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                Cookies.setToken('token', authToken);

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};

Однако это не позволяет мне войти в систему вообще, и я получаю сообщение об ошибке "неправильное числосегменты.Есть идеи, почему это не работает?

Answer 1

Есть несколько различных вариантов, которые вы можете использовать здесь, чтобы решить возникшую проблему: просто найти место для хранения JWT, чтобы вы могли использовать его даже после обновления страницы.

1. Сохраните JWT в localStorage или sessionStorage в обратном вызове axios.post, чтобы иметь доступ к нему даже после обновления страницы.Чтобы узнать, какое хранилище наиболее подходит для вашего приложения, см. this .

   Для краткости значения, хранящиеся в localStorage , будут сохраняться до тех пор, пока вы не удалите их явно (вы можете сделать это с помощью кода JS).Кроме того, любые вкладки, которые вы открываете в своем браузере для этого домена, будут иметь доступ к этому (очень полезно, если вы все еще хотите войти с новыми вкладками).С другой стороны, значения, хранящиеся в sessionStorage , действуют только до тех пор, пока вкладка не будет закрыта.Они также не могут быть разделены между вкладками.

   Использовать это так же просто, как:
   localStorage.setItem("JWT", authToken); или sessionStorage.setItem("JWT", authToken); в вашем обратном вызове после authToken = res.data.token;

   Так что теперь у вас есть место, где вы сохранили JWTвсе, что вам нужно сделать, это убедиться, что JWT существует в хранилище, когда ваше приложение инициализируется при загрузке страницы (или обновлении).Вот базовый пример использования localStorage:

// This should be one of the first things that run on your app.

const axios = axiosAPI.create({
    baseURL: baseURL
});

// Check if user is logged in.
(function() { 
  let authToken = localStorage.getItem("JWT");
  if (authToken === null) {
      // This means that there ISN'T JWT and no user is logged in.
      axios.defaults.headers.common.Authorization = null;
  } else {
      // This means that there IS a JWT so someone must be logged in.
      axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
  }
})();

Это позволит убедиться, что пользователь не вышел из системы при загрузке страницы, если ранее вошел в систему.

Сохраните JWT в файле cookie на стороне клиента .Здесь файл cookie используется в качестве механизма хранения, поскольку вы фактически не работаете с файлами cookie на стороне сервера, поскольку вся ваша аутентификация основана на JWT.Вы можете использовать тот же шаблон кода, что и выше, но вместо этого будете использовать document.cookie = "key=value" для установки cookie и document.cookie для просмотра всех cookie.

Этот второй способ менее распространен, потому что он вынуждает вас выполнять большую часть ручной работы, например, анализировать все файлы cookie и устанавливать правильный атрибут cookie path, чтобы файл cookie отправлялся только длятребуемые конечные точки (иначе вы просто создаете ненужные накладные расходы).Если вы воспользуетесь этой опцией, прочитайте this , чтобы помочь вам создать cookie-файл в соответствии с вашими потребностями. Вы также можете использовать вспомогательную JS-библиотеку, такую ​​как js-cookie , чтобы помочь манипулировать файлами cookie на стороне клиента.

Кроме того, я прочитал бы https://stackoverflow.com/a/40376819/11048825, чтобы углубиться в эти два варианта и понять плюсы и минусы, связанные с каждым.