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

我已经三天没有找到任何与我的问题相关的解决方案了。我有一个Nuxt.js前端，它使用从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',
标题：{
“X-CSRFToken”：“CSRFToken”，
},
xsrfCookieName:“csrftoken”，
xsrfHeaderName：“X-CSRFToken”，
},
//身份验证模块配置
认证：{
战略：{
本地：{
端点：{
登录：{
url:“/api/accounts/login/”，
方法：“post”，
propertyName:“访问”，
altProperty:“刷新”
},
注销：{}，
用户：false
}
}
},
重定向：{
登录名：'/login'，
},
},
路由器：{
中间件：['auth']
},
...
}

这是我的登录脚本：

导出默认值{
数据（）{
返回{
用户：{
用户名：“”，
密码：“”，
},
};
},
方法：{
异步登录（）{
试一试{
等待此消息。$auth.loginWith（“本地”{
数据：这个用户，
});
控制台日志（“有效”）；
}捕捉（错误）{
控制台日志（“无效”）；
}
},
},
};

---

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

在这里查看axios配置：

您可以看到如何使用以下内容设置默认标题

instance.defaults.headers.common['Authorization']=AUTH\u令牌

然后，在Nuxt中，您可以扩展默认的auth插件：

numxt.config.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;
}

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

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

auth:{
...
插件：[{src:'~/plugins/nuxt auth.js'，模式：'client'}]，
},

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



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

!!!

/plugins/nuxt auth.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;
}

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

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

导出默认值（{$axios，$config:{csrfToken}}）=>{
$axios.defaults.headers.common['X-CSRFToken']=CSRFToken；
}

PS：如果您需要一些关于如何在Nuxt中使用env变量的帮助，您可以检查以下问题：
我通过JavaScript获取csrf令牌来实现它，就像在：

~/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;
}

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

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

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

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

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

X-CSRFToken: LWs(...)nm9

你能给我们举一个它应该是什么样子的例子吗？因为在这里，您将它设置为
“X-CSRFToken”：“CSRFToken”
，并且它正在发送它应该发送的内容，不是吗？