缺少 Django、React 和 Rest Framework JWT 身份验证标头

Posted 2023-02-24

【中文标题】缺少 Django、React 和 Rest Framework JWT 身份验证标头

【英文标题】：Django, React and Rest Framework JWT authentication header missing

【发布时间】：2021-12-03 15:51:29

【问题描述】：

我目前正在使用 SimpleJWT 在 Django/React 中创建登录系统。

登录后端在 React 中，它发布登录凭据并从 api 获取 JWT-Token。然后它将令牌保存到 localstorage 并将其设置为 axios 的请求标头，以供将来的 api 调用：

    const handleSubmit = (e) => 
    e.preventDefault();

    axiosInstance
        .post(`token/`, 
            email: formData.email,
            password: formData.password,
        )
        .then((res) => 
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            axiosInstance.defaults.headers['Authorization'] =   'JWT ' + localStorage.getItem('access_token');
            history.push("");
            location.reload();
        ).catch(err => console.log(err));
;

api urls.py:

path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),

我使用 axios 进行的每个 API 调用都有效，并且只有在登录后才返回......应该是...... 但问题出在 Django 中的第二个前端。它是一个部分静态的前端，主要由主页的简单 html 模板组成，但带有一个需要用户信息的导航栏。

@api_view(['GET'])
def home(request):
    print(request.header)
    context = 
        'posts': posts
    
    return render(request, 'MainApp/home.html', context)

我注意到只是缺少身份验证标头：

当我登录后尝试打印用户数据时：request.user，输出为AnonymousUser

通过在settings.py中将默认权限设置为isAuthenticated来保护模板视图后 像这样：'DEFAULT_PERMISSION_CLASSES' : ['rest_framework.permissions.IsAuthenticated'] 然后我得到401 Unauthorized / "Authentication credentials were not provided."

我还检查了request.META 并且缺少授权标头（HTTP_AUTHORIZATION）。

有没有办法从本地存储中获取 Token 并将其添加到请求标头中？我知道这是在客户端完成的，但是为什么不在这种情况下呢？

【参考方案1】：

您似乎正在尝试将 Django 的后端和前端功能与 React 一起使用。你需要的是只使用 Django 作为你的后端和 React 作为你的前端。这个概念是，一旦你决定使用 Django 和 React，你就不需要使用 Django 创建前端视图，因为这将由 React 处理。

所以在 Django 中创建您的模型，然后将 Django Rest Framework 集成到您的后端项目中。使用 Django Rest Framework，您将能够创建序列化程序以将您的 Django 模型转换为 JSON，以便您的 React 前端可以处理接收到的数据。简而言之，您的 React 前端将简单地通过使用 Django Rest Framework 创建的 API 向您的 Django 后端发出请求。不需要 Django 的原生视图和模板，因为 React 会处理这些。

您的令牌将添加到您向后端发出的每个请求中。这可以通过 Axios 轻松配置。

因此，一旦您设置了 Django 模型。立即转向使用 Django Rest Framework 对数据进行序列化。您基本上忽略了创建 Django 视图，因为这些视图将由您的 React 前端处理。您的 React App 将通过您创建的接口与 Django 后端进行通信。

【讨论】：

感谢您的回答。我知道使用两个前端会使一切变得更加困难，就像将 React 与 Axios 一起使用一样，但这是为了我的工作而决定只使用 React 作为唯一的前端并不是我的责任……所以我别无选择而不是用我得到的东西工作。好消息是还有另一种选择：在 React 登录组件中通过 Cookie 保存令牌，效果很好

酷。特使。很高兴你设法找到了方法。