带有 DRF 的 cookie 的 Nuxt 身份验证答案

【问题标题】：Nuxt auth with cookies with DRF带有 DRF 的 cookie 的 Nuxt 身份验证
【发布时间】：2021-05-12 02:33:11
【问题描述】：

我正在尝试在我的前端（用 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,
  },
}

我的后端是带有rest框架的django和带有以下配置的djoser：-

DJOSER = {
    'CREATE_SESSION_ON_LOGIN': True
}

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

当我在前端调用 auth login 方法时，像这样：-

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

一切都按预期工作。

前端调用 /auth/token/login。
后端对用户进行身份验证并在浏览器中设置cookie。
前端调用 /auth/users/me 返回用户数据，前端将 loggedIn 设置为 true。

但是当用户尝试在前端注销时，由于没有设置 CSRF 令牌，POST 请求失败。

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

我已经尝试了各种其他方法来设置这些东西，但似乎没有一个效果更好：-

使用本地存储。
- 这不是很安全，不应该使用
使用 TokenAuthentication 代替 SessionAuthentication
- nuxt.config.js 看起来像这样：-
授权：{ 策略：{ 曲奇饼： { 令牌：{ 属性：'auth_token'，类型：'令牌'， }, 用户：{ 属性：假， }, 端点：{ 登录： { url: '/auth/token/login/', }, 用户：{ url: '/auth/users/me/', 方法：'得到'， }, 登出： { url: '/auth/token/logout', }, }, }, 本地：假， }, }

但是后端正在寻找带有 auth_token 的 Authorization 标头值，并且这不会在请求中发送。

我是否以正确的方式接近这一点，还是我需要做其他事情？我对这里的前端东西还很陌生，所以无法让它工作让我很生气，我非常感谢一些帮助。

【问题讨论】：

标签： django cookies django-rest-framework nuxt.js nuxt-auth

【解决方案1】：

对于遇到相同问题的任何人，我已经找到了解决方案。

问题是 axios 中 xsrfHeaderName 的默认值与 django 后端正在寻找的值不匹配。因此 cookie 中的 csrftoken 不会在 HTTP 标头中发送。

要修复它，您需要创建一个如下所示的插件：-

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

并将其添加到 nuxt.config.js 的插件部分：-

'~/plugins/axios',

【讨论】：