Как сделать обновление пары JWT токенов в Nuxt 3?

Question

[Олег Камзин]

Привет!
Помогите пожалуйста, уже очень долго мучаюсь.

await useFetch('http://localhost:3333/auth/refresh', {
 method: 'POST',
 credentials: 'include'
})

Делаю запрос на сервис для обновления пары JWT токенов. При выключенном ssr все работает, если включаю, при первой загрузке не работает, а после гидратации все запросы отправляются с куками.

То есть при сервероном рендеринге куки клинета просто не передаются, я проверил.

Как правильно сделать этот запрос в Nuxt приложениях. Столкнулся с проблемой при переходе с чистого Vue.

Comments

[Just_Because]

Тут важнее понять где именно вы вызываете запрос. В случае с серверным рендерингом запрос не пройдёт, так как на сервере нет куков. Есть такая дока на сайте Nuxt 3

И вот пример, должно работать:

/* This call will only be performed on the client */
const { pending, data: posts } = useFetch('/api/comments', {
  lazy: true,
  server: false
})

Answer 1

[gogowq]

Установите модуль @nuxtjs/axios, если он ещё не установлен:
npm install @nuxtjs/axios

Добавьте модуль @nuxtjs/axios в конфигурацию Nuxt.js, редактируя файл nuxt.config.js:

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // Настройки Axios
    // Здесь вы можете указать базовый URL и другие параметры
  },
}

В вашем коде используйте $axios, предоставляемый модулем @nuxtjs/axios:

await this.$axios.post('http://localhost:3333/auth/refresh', null, {
  withCredentials: true,
})

Здесь мы использовали $axios.post для выполнения POST-запроса с указанием URL, передачей пустого тела запроса null и опцией withCredentials: true, которая позволяет передавать куки клиента.

Теперь запрос будет отправляться с куками клиента, как при SSR, так и при клиентской навигации. Убедитесь, что серверный и клиентский код выполняется в рамках соответствующих методов или хуков, таких как asyncData, fetch, mounted, created или компонентов жизненного цикла, в зависимости от ваших потребностей.