DRF и React Login, в запросе отсутствует заголовок аутентификации JWT

В настоящее время я делаю систему входа в Django/React и SimpleJWT RestFramework и пока все, что связано с JWT и защищенными (API)View, работает, кроме Django Frontend.

Фронтенд входа выполнен на React, который публикует учетные данные для входа и получает JWT-токен из api, сохраняет их в localstorage и устанавливает в качестве заголовка для axios:

    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'),

Каждый вызов API, который я делаю с помощью axios, работает и возвращается только после входа в систему... как и должно быть... НО проблема во втором фронтенде, который на Django. Это частично статический фронтенд, который состоит в основном из простых html-шаблонов для домашней страницы, но с Navbar, который требует информацию о пользователе.

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

Я заметил, что заголовок аутентификации просто отсутствует:

  • Когда я пытаюсь вывести данные пользователя после входа в систему : request.user, выводится AnonymousUser

  • После того, как я сделал представление шаблона защищенным, установив разрешение по умолчанию isAuthenticated в settings.py следующим образом: 'DEFAULT_PERMISSION_CLASSES' : ['rest_framework.permissions.IsAuthenticated'] Затем я получаю 401 Unauthorized / "Authentication credentials were not provided."

Также я проверил request.META и авторизационный заголовок (HTTP_AUTHORIZATION) отсутствует.

Есть ли способ получить Token из localstorage и добавить его в заголовок запроса? Я знаю, что это делается на стороне клиента, но почему это не делается в данном случае?

Похоже, вы пытаетесь использовать возможности бэкенда и фронтенда Django вместе с React. Вам нужно использовать только Django в качестве бэкенда и React в качестве фронтенда. Концепция заключается в том, что, когда вы решите работать с Django и React, вам не нужно будет создавать представления фронтенда в Django, поскольку этим будет заниматься React.

Создайте свои модели в Django, а затем интегрируйте Django Rest Framework в свой бэкенд-проект. С помощью Django Rest Framework вы сможете создавать сериализаторы для преобразования ваших моделей Django в JSON, чтобы ваш React frontend мог работать с полученными данными. В двух словах, ваш React frontend будет просто делать запросы к вашему Django backend через API, созданный с помощью Django Rest Framework. Не будет никакой необходимости в родных представлениях и шаблонах Django, поскольку этим будет заниматься React.

Ваш токен будет добавляться к каждому запросу, который вы делаете к бэкенду. Это можно легко настроить с помощью Axios.

Итак, как только вы настроили свои модели Django. Сразу же переходите к сериализации данных с помощью Django Rest Framework. Вы практически игнорируете создание представлений Django, поскольку эти представления будут обрабатываться вашим фронтендом React. Ваше приложение React будет взаимодействовать с бэкендом Django через созданный вами интерфейс.

Вернуться на верх