Nuxt auth с файлами cookie с DRF

Question

Я пытаюсь реализовать аутентификацию в моем интерфейсе (который написан на NuxtJS), используя файлы cookie, а не локальное хранилище.

Я использую пакет nuxt-auth со следующей конфигурацией: -

      auth: {
  strategies: {
    cookie: {
      token: {
        required: false,
        type: false,
      },
      user: {
        property: false,
      },
      endpoints: {
        login: {
          url: '/auth/token/login/',
        },
        user: {
          url: '/auth/users/me/',
          method: 'get',
        },
        logout: {
          url: '/auth/token/logout',
        },
      },
    },
    local: false,
  },
}

Мой бэкэнд - это django с остальной структурой и djoser со следующей конфигурацией: -

      DJOSER = {
    'CREATE_SESSION_ON_LOGIN': True
}

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication'
    ),
}

Когда я вызываю метод авторизации в моем интерфейсе, например: -

      this.$auth.loginWith('cookie', {
  data: this.login,
})

все работает как положено.

1. Интерфейс вызывает / auth / token / login.
2. Бэкэнд аутентифицирует пользователя и устанавливает cookie в браузере.
3. Интерфейс вызывает / auth / users / me, который возвращает данные пользователя, а интерфейс устанавливает для loggedIn значение true.

Но когда пользователь пытается выйти из внешнего интерфейса, запрос POST не выполняется, потому что токен CSRF не установлен.

      HTTP 403: CSRF Failed: CSRF token missing or incorrect.

Я пробовал множество других способов настроить это, и ни один из них, похоже, не работает лучше: -

1. Используйте локальное хранилище.

   • это не очень безопасно и не должно использоваться

2. Используйте TokenAuthentication вместо SessionAuthentication

   • nuxt.config.js выглядит так:-

   auth: {стратегии: {cookie: {token: {property: 'auth_token',type: 'Token',},user: {property: false,}, конечные точки: {login: {url: '/auth / token / login / ',}, пользователь: {url:' / auth / users / me / ', метод:' get ',}, выход: {url:' / auth / token / logout ',},},}, локальный: ложный, },}

   но бэкэнд ищет значение заголовка для авторизации с auth_token, и оно не отправляется в запросе.

Правильно ли я подхожу к этому или мне нужно еще что-то сделать? Я новичок в этом интерфейсе, поэтому меня бесит то, что я не могу заставить его работать, и я очень признателен за помощь.

Answer 1

Для всех, кто борется с той же проблемой, я нашел решение.

Проблема заключалась в том, что значение по умолчанию для xsrfHeaderName в axios не соответствует значению, которое ищет бэкэнд django. Таким образом, csrftoken из файла cookie не отправляется в заголовках HTTP.

Чтобы исправить это, вам нужно создать плагин, который выглядит так: -

      export default function ({ $axios }) {
  $axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
  $axios.defaults.xsrfCookieName = 'csrftoken'
}

и добавьте его в раздел плагинов nuxt.config.js:-

      '~/plugins/axios',