如何使用 JWT 和 HttpOnly cookie 对用户进行身份验证答案

【问题标题】：How to authenticate user with JWT and HttpOnly cookies如何使用 JWT 和 HttpOnly cookie 对用户进行身份验证
【发布时间】：2020-12-04 12:01:30
【问题描述】：

我目前正在开发一个 Django-React 网络应用程序并使用 django-rest-framework-simplejwt 和 dj-rest-auth 进行身份验证。

起初，我将 JWT 存储在前端 cookie (js-cookie) 中，并在标头中发送令牌以访问受限端点。由于本地客户端 cookie 不是 HttpOnly，经过一些研究，我发现将其存储在前端不是一种安全的方法。所以我决定不将它们存储在客户端 cookie 中。

这似乎是使用 HttpOnly cookie 的最佳解决方案，在 django 设置中，我将 cookie 名称声明为 JWT_AUTH_COOKIE = 'myHttpOnlyCookie'，因此当我使用用户名和密码从客户端发出请求以使用具有 access_token 的 cookie 登录服务器响应时.

对于登录部分，我没有编写任何代码，因为 dj-rest-auth 处理得很好，所以我使用他们的标准 loginserializer 和视图。(https://github.com/jazzband/dj-rest-auth/blob/master/dj_rest_auth/serializers.py)。好吧，也许我应该修改它。

但是问题是我无法在客户端请求的标头中添加令牌，因为我没有将令牌存储在客户端上并且它是 HttpOnly。好吧，如果我不能在请求中发送令牌，我真的不知道如何对用户进行身份验证。

【问题讨论】：

标签： python django reactjs cookies

【解决方案1】：

一旦您向服务器发出登录请求，默认情况下会将令牌添加到 httponly cookie。默认情况下，在连续请求时发送 cookie。

axios 请求登录。

axios.post('http://localhost:8080/api/auth/login/',
        {'email':'test_email', 'password':'test_password'},
        {withCredentials:true},
        {headers:{
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }}
    )

“withCredentials”必须始终设置为“true”，这将确保将 cookie 添加到每个请求中。登录后，令牌将存储在 httponly 苦力中。对于下一个请求，请参阅下面的伪代码。

const axiosGetReqConfig = {baseURL: '', withCredentials:true, headers:{'Content-Type':'application/json, 'Accept':'application/json'}}

axiosGetReqConfig.get('test/').then(resp => {console.log(resp)}).catch(err => {console.log(err)})

axiosGetReqConfig.interceptors.response.use(
    // If request is succesfull, return response.
    (response) => {return response},
    // If error occured, refresh token and try again.
    (error) => {
        const originalRequest = error.config;
        console.log(originalRequest)
        // Make a call to refresh token and get new access token.
        axios('http://localhost:8080/api/auth/token/refresh/', {
            method:'post',
            withCredentials: true
        }).then(resp => {
            console.log(resp);
        }).catch(err => {
            // push user to login page.
            console.log(err)
        })
        // Return original request.
        return axios.request(originalRequest)

        return Promise.reject(error)
    }
)

在上面的代码中，我正在使用一些基本细节创建配置对象，并在访问令牌过期时实现拦截器来刷新令牌。如果刷新令牌过期，用户将被重定向到登录页面。
包含 httponly cookie 的主要部分是我们在发出 axios 请求和“withCredentials”时使用的变体。 JWT 存在一个未解决的问题。由于 dj-rest-auth 使用 JWT，如果需要刷新令牌，则必须在 django 中实现中间件。请参阅下面的链接以实现中间件并将该中间件添加到设置中。 https://github.com/iMerica/dj-rest-auth/issues/97#issuecomment-739942573

【讨论】：