Django+React+SimpleJWT项目Django模板页请求缺失JWT认证头问题咨询

问题根因 #

你给axios实例配置的默认Authorization请求头仅对通过该axios实例发起的请求生效。你访问Django渲染的半静态首页时，是浏览器直接发起的普通页面导航请求，浏览器本身不会主动读取localStorage中的令牌并附加到这类请求的请求头中，因此服务端收不到认证凭证，自然识别为匿名用户。

可行解决方案 #

方案1：改用Cookie存储令牌（最适配当前场景，安全性更高） #

SimpleJWT原生支持通过Cookie传递令牌，配置后浏览器发起的所有同源请求（包括普通页面导航、AJAX请求）都会自动携带Cookie中的令牌，无需额外前端改造即可同时适配React端和Django模板端的认证需求。
在Django的settings.py中添加如下SimpleJWT配置：

SIMPLE_JWT = {
    # 保留你原有的其他SimpleJWT配置
    "AUTH_COOKIE": "access_token",
    "AUTH_COOKIE_REFRESH": "refresh_token",
    "AUTH_COOKIE_HTTPONLY": True, # 禁止前端JS读取令牌，防范XSS攻击，比localStorage存储更安全
    "AUTH_COOKIE_SECURE": False, # 生产环境部署时改为True，仅限HTTPS协议传输Cookie
    "AUTH_COOKIE_SAMESITE": "Lax",
}

配置完成后，登录接口返回令牌时会自动种下对应Cookie，SimpleJWT会优先从Cookie中读取令牌做认证，React端的axios逻辑不需要修改，原有的localStorage存储可以保留也可以删除。

方案2：模板页面异步拉取用户信息 #

如果必须保留localStorage存储令牌的逻辑，可以调整权限配置：

1. 取消home视图的登录权限限制，允许匿名用户访问页面
2. 在Django渲染的home.html模板中添加JS逻辑，页面加载后读取localStorage中的令牌，异步请求用户信息接口动态渲染导航栏：

document.addEventListener('DOMContentLoaded', () => {
    const accessToken = localStorage.getItem('access_token')
    if (!accessToken) {
        // 未登录逻辑，比如跳转到React登录页
        return
    }
    // 异步拉取用户信息
    fetch('/api/current_user/', {
        headers: {
            'Authorization': `JWT ${accessToken}`
        }
    })
    .then(res => res.json())
    .then(userInfo => {
        // 替换导航栏的匿名展示内容为用户信息
        document.querySelector('#nav-username').innerText = userInfo.nickname
    })
})

3. 单独开发一个返回当前登录用户信息的接口，配置登录权限限制即可。

内容的提问来源于stack exchange，提问作者Samuel Grosser