如何在使用 @nuxtjs/auth-next 时自定义 axios答案

【问题标题】：How to customize axios while using @nuxtjs/auth-next如何在使用 @nuxtjs/auth-next 时自定义 axios
【发布时间】：2021-08-22 08:04:41
【问题描述】：

我正在尝试寻找 3 天的解决方案，但没有找到与我的问题相关的任何内容。我有一个 Nuxt.js 前端，它使用 auth module 从 DRF 后端获取 JWT 令牌。

登录后，服务器打印出这个：

Forbidden (CSRF cookie not set.): /api/accounts/login/
[04/Jun/2021 10:36:44] "POST /api/accounts/login/ HTTP/1.1" 403 2870

在网络选项卡中，我尝试登录时可以在请求标头中看到：X-CSRFToken: csrftoken，这意味着 csrf 令牌未正确传递。对吧？

在我的 nuxt.config.js 文件中，我有以下设置：

axios: {
    baseURL: 'http://localhost:8000',
    headers: {
      "X-CSRFToken": "csrftoken",
    },
    xsrfCookieName: "csrftoken",
    xsrfHeaderName: "X-CSRFToken",
  },

  // authentication module configuration
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/accounts/login/',
            method: 'post',
            propertyName: 'access',
            altProperty: 'refresh'
          },
          logout: {},
          user: false
        }
      }
    },
    redirect: {
      login: '/login',
    },
  },
  router: {
    middleware: ['auth']
  },
  ...
}

这是我的登录脚本：

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async login() {
      try {
        await this.$auth.loginWith("local", {
          data: this.user,
        });
        console.log("VALID");
      } catch (err) {
        console.log("INVALID");
      }
    },
  },
};

如何将 csrf 令牌正确传递到我的 Django 后端？

【问题讨论】：

你能给我们举个例子来说明它应该是什么样子吗？因为在这里，您确实将其设置为 "X-CSRFToken": "csrftoken" 并且它正在发送它应该发送的内容，不是吗？

标签： django vue.js django-rest-framework jwt nuxt.js

【解决方案1】：

看这里的axios配置：https://github.com/axios/axios#global-axios-defaults

您可以查看如何使用类似这样的内容设置默认标头 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

然后，在 Nuxt 中，您可以扩展默认的身份验证插件：https://auth.nuxtjs.org/recipes/extend

nuxt.config.js

auth: {
  ...
  plugins: [{ src: '~/plugins/nuxt-auth.js', mode: 'client' }],
},

并使用环境变量在那里设置您的 CSRF 令牌。

!!!
这有点棘手，但上面的 plugins 嵌套在 auth 键中，不在 nuxt 配置文件的全局范围内。
！！！

/plugins/nuxt-auth.js

export default ({ $axios, $config: { csrfToken } }) => {
  $axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
}

PS：如果你需要一些关于如何在 Nuxt 中使用环境变量的帮助，你可以查看这个问题：How to use .env variables in Nuxt?

【讨论】：

【解决方案2】：

我通过 JavaScript 获取 csrf 令牌使其工作，就像在 Django docs 中一样：

~/assets/scripts/cookie.js

export function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

然后我在插件脚本中使用它：

~/plugins/nuxt-auth.js

import { getCookie } from '../assets/scripts/cookie.js'

export default ({ $axios }) => {
    $axios.defaults.headers.common['X-CSRFToken'] = getCookie('csrftoken');
}

我像这样编辑了nuxt.config.js 文件：

auth: {
  ...
  plugins: [{ src: '~/plugins/nuxt-auth.js', mode: 'client' }],
  ...
},

现在标头中的 X-CSRFToken 是正确的：

X-CSRFToken: LWs(...)nm9

【讨论】：