Как я могу сохранить JWT в файлах cookie с помощью Axios?

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

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

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

   Использовать это так же просто, как:
   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}`;
  }
})();

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

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

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

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