2

我正在尝试使用 cookie 在我的前端(用 NuxtJS 编写)上实现身份验证,而不是本地存储。

我正在使用 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,
})

这一切都按预期工作。

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

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

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

我已经尝试了各种其他方法来设置这些东西,但它们似乎都没有更好的效果:-

  1. 使用本地存储。

    • 这不是很安全,不应该使用
  2. 使用 TokenAuthentication 而不是 SessionAuthentication

    • nuxt.config.js 看起来像这样:-

    auth: { strategy: { cookie: { token: { property: 'auth_token', type: 'Token', }, user: { property: false, }, endpoints: { login: { url: '/auth/token/login /',},用户:{ url:'/auth/users/me/',方法:'get',},注销:{ url:'/auth/token/logout',},},},本地:错误的, }, }

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

我是以正确的方式接近这个还是我需要做的其他事情?我对这里的前端东西还很陌生,所以无法让它工作让我很生气,我真的很感激一些帮助。

4

1 回答 1

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',
于 2021-02-09T12:45:45.523 回答