Аутентификация пользователя на фронтенде React по группам пользователей бэкенда Django с помощью JWT

Возникают проблемы с аутентификацией пользователя из React frontend в Django backend с помощью JWT-токенов.

У меня есть экземпляр Django с представлением check_auth в файле views.py:

@csrf_exempt
@login_required
def check_auth(request):
    user = request.user
    response_data = {
        "message": "You are authenticated",
        "user": user.username,
        "authenticated": True,
        "groups": list(user.groups.values_list('name', flat=True))
    }
    return JsonResponse(response_data)

На стороне Django это вызывается из http://127.0.0.1:8000/api/check-auth/

backend/apples/urls.py - path('check-auth/', check_auth, name='check_auth'),

backend/urls.py - path("api/", include("apples.urls")),

На фронтенде есть маршрут в App.jsx для '/check-auth', который вызывает компонент CheckAuth.jsx.

<Route path="/check-auth" element={<CheckAuth />} />

CheckAuth.jsx

import React, { useEffect, useState } from 'react';
import api from '../api';

const CheckAuth = () => {
  const [authStatus, setAuthStatus] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAuthStatus = async () => {
      try {
        const response = await api.get('/api/check-auth/');
        setAuthStatus(response.data);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchAuthStatus();
  }, []);

  if (!authStatus) return <div>Loading...</div>;

  // Example error handling if fields are missing or undefined
  const user = authStatus.user || 'Unknown';
  const authenticated = authStatus.authenticated ? 'Yes' : 'No';
  const groupsDisplay = authStatus.groups ? authStatus.groups.join(', ') : 'No groups';

  return (
    <div>
      <h1>Authentication Status</h1>
      <p>User: {user}</p>
      <p>Authenticated: {authenticated}</p>
      <p>Groups: {groupsDisplay}</p>
    </div>
  );
};

export default CheckAuth;

При устранении неполадок в инспекторе Chrome, приложение, локальное хранилище, я вижу обновление и токены доступа, которые выглядят корректно.

Я также вижу в инспекторе Chrome, Сеть, два процесса check_auth/, первый с кодом 200, а второй с кодом 302.

Вторая проверка check_auth/ показывает, что носитель авторизации корректен:

enter image description here

enter image description here

Это совпадает с api.js:

import axios from 'axios';
import { ACCESS_TOKEN } from './constants';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://127.0.0.1:8000',
});

axios.defaults.withCredentials = true;

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(ACCESS_TOKEN);
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

Конечная точка Django выглядит корректно, но только после того, как я войду в систему через http://127.0.0.1:8000/admin, а затем перейду по адресу http://127.0.0.1:8000/api/check-auth/

enter image description here

Но обращение к конечной точке Django с фронтенда всегда возвращает:

Authentication Status
User: Unknown

Authenticated: No

Groups: No groups

enter image description here

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