带有 DRF 的 cookie 的 Nuxt 身份验证
Posted
技术标签:
【中文标题】带有 DRF 的 cookie 的 Nuxt 身份验证【英文标题】:Nuxt auth with cookies with DRF 【发布时间】:2021-05-12 02:33:11 【问题描述】:我正在尝试在我的前端(用 NuxtJS 编写)上使用 cookie 而不是本地存储来实现身份验证。
我使用的是 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,
)
一切都按预期工作。
-
前端调用 /auth/token/login。
后端对用户进行身份验证并在浏览器中设置cookie。
前端调用 /auth/users/me 返回用户数据,前端将 loggedIn 设置为 true。
但是当用户尝试在前端注销时,由于没有设置 CSRF 令牌,POST 请求失败。
HTTP 403: CSRF Failed: CSRF token missing or incorrect.
我已经尝试了各种其他方法来设置这些东西,但似乎没有一个效果更好:-
使用本地存储。
这不是很安全,不应该使用使用 TokenAuthentication 代替 SessionAuthentication
nuxt.config.js 看起来像这样:-授权: 策略: 曲奇饼: 令牌: 属性:'auth_token', 类型:'令牌', , 用户: 属性:假, , 端点: 登录: url: '/auth/token/login/', , 用户: url: '/auth/users/me/', 方法:'得到', , 登出: url: '/auth/token/logout', , , , 本地:假, ,
但是后端正在寻找带有 auth_token 的 Authorization 标头值,并且这不会在请求中发送。
我是否以正确的方式接近这一点,还是我需要做其他事情?我对这里的前端东西还很陌生,所以无法让它工作让我很生气,我非常感谢一些帮助。
【问题讨论】:
【参考方案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',
【讨论】:
以上是关于带有 DRF 的 cookie 的 Nuxt 身份验证的主要内容,如果未能解决你的问题,请参考以下文章
Nuxt Apollo 模块请求授权标头,带有双 'Bearer'
在 Django/DRF 中使用 JWT 身份验证并将 JWT 存储在 HttpOnly Cookie 中
带有访客和身份验证中间件的 Nuxt 身份验证将经过身份验证的用户在刷新时重定向到错误的页面