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

问题描述

我正在尝试寻找 3 天的解决方案，但没有找到与我的问题相关的任何内容。我有一个 Nuxt.js 前端，它使用auth 模块从 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 后端？

标签： djangovue.jsdjango-rest-frameworkjwtnuxt.js

在这里查看 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' }],
},

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

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

/plugins/nuxt-auth.js

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

PS：如果您需要有关如何在 Nuxt 中使用 env 变量的帮助，可以查看这个问题：如何在 Nuxt 中使用 .env 变量？

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

问题描述

解决方案

推荐阅读