Блог

На серверной части я реализовал аутентификацию JWT с помощью файлов cookie HttpOnly. На интерфейсе я использую axios для использования REST API из бэкенда.

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

Экземпляр Axios

 import axios from 'axios'

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8000/api',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFTOKEN',
  withCredentials: true,
})

export default apiClient

 

Код перехватчика

 import api from './apiClient'
import router from '@/router'

const setup = (store) => {
  api.interceptors.response.use(
    (res) => {
      return res
    },
    async (err) => {
      const originalRequest = err.config

      if (err.response.status !== 401) {
        return Promise.reject(err)
      }

      if (originalRequest.url === '/auth/token/refresh/') {
        store.dispatch('auth/logout')
        await router.push({ name: 'Login' })
        return Promise.reject(err)
      }

      // TRY TO REFRESH TOKEN
      await api.post('/auth/token/refresh/')
      return api(originalRequest)
    }
  )
}

export default setup
 

Если срок действия токена обновления истек, то вызовы api дублируются.

Я мог бы использовать другой экземпляр Axios без перехватчика для вызова конечной точки API, для которой не требуется аутентификация. Но с помощью файлов cookie HttpOnly это невозможно, потому что во внешнем интерфейсе у меня нет прямого доступа к токену обновления. Я уже пытаюсь окружить вызов токена обновления try/catch, но это не работает