Nuxt auth with cookie with DRF

编程问答 2022-05-26

问题描述

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

当我在前端调用身份验证登录方法时，如下所示：-

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

一切都按预期进行。

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

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

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

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

  1. 使用本地存储。

    • 这不是很安全，不应使用

  2. 使用 TokenAuthentication 而不是 SessionAuthentication

    授权：{ 策略：{ 曲奇饼： { 令牌：{ 属性：'auth_token'， 类型：'令牌'， },用户：{ 属性：假， },端点：{ 登录： { url: '/auth/token/login/',用户：{ url: '/auth/users/me/',方法：'获取'， },登出： { url: '/auth/token/logout',当地：假， },}

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

我是否以正确的方式解决这个问题，还是我需要做其他事情？我对前端的东西还很陌生，所以无法让它工作让我很生气，我真的很感激一些帮助。

解决方法

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

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

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

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

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

'~/plugins/axios',
cookiesdjangodjango-rest-frameworknuxt-authnuxt.js