Django、React 和 Rest Framework JWT 身份验证 header 缺失

Question

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

登录后端在 React 中，它发布登录凭据并从 api 获取 JWT-Token。然后它将令牌保存到本地存储并将其设置为 request-header for 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 调用都有效，并且只有 returns 登录后...应该是... 但是问题出在第二个前端，它在 Django 中。它是一个部分静态的前端，主要由主页的简单 html-templates 组成，但带有需要用户信息的导航栏。

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

我注意到身份验证 Header 完全丢失了：

当我尝试在登录后打印 user-data 时：request.user，输出是 AnonymousUser
通过在 settings.py 中将默认权限设置为 isAuthenticated 来保护模板视图之后像这样：'DEFAULT_PERMISSION_CLASSES' : ['rest_framework.permissions.IsAuthenticated'] 然后我得到 401 Unauthorized / "Authentication credentials were not provided."

我还检查了 request.META 并且缺少 authorization-header (HTTP_AUTHORIZATION)。

有没有办法从localstorage获取Token并添加到请求中header？我知道这是在客户端完成的，但为什么在这种情况下不这样做？

Answer 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 后端通信。

Django、React 和 Rest Framework JWT 身份验证 header 缺失

Django, React and Rest Framework JWT authentication header missing

reactjs

django

django-rest-framework

jwt

django-rest-framework-simplejwt