Как получить доступ к админке Django (DRF api) из готового сайта на React?

Для получения доступа к админке Django (DRF API) из готового сайта на React, вам потребуется настроить соответствующую аутентификацию и авторизацию.

1. Создайте компонент в React для входа пользователя. Этот компонент должен содержать поля для ввода логина и пароля, а также кнопку для отправки формы.

2. При отправке формы используйте fetch (или любую другую библиотеку для HTTP-запросов) для отправки запроса на сервер Django. Запрос должен содержать данные, введенные пользователем в форму.

const handleLogin = async (e) => {
  e.preventDefault();
  const response = await fetch('/api/login/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username: username,
      password: password,
    }),
  });
  
  if (response.ok) {
    // Вход выполнен успешно, перенаправление на страницу админки
    window.location.href = '/admin/';
  } else {
    // Ошибка входа
    setError(true);
  }
};

3. Создайте компонент для работы с админкой, например AdminPage. В этом компоненте вы можете использовать роутинг для отображения разных страниц админки.

const AdminPage = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/admin/users">
          <UsersPage />
        </Route>
        <Route exact path="/admin/posts">
          <PostsPage />
        </Route>
        // другие роуты для разных страниц админки
      </Switch>
    </Router>
  );
};

4. Настройте защищенный маршрут для AdminPage, чтобы только авторизованные пользователи имели доступ к админке. Можно использовать библиотеку React Router для этого.

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = ... // Проверка авторизации пользователя
  return (
    <Route {...rest}>
      {isAuthenticated ? (
        <Component />
      ) : (
        <Redirect to="/login" />
      )}
    </Route>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/login">
          <LoginPage />
        </Route>
        <ProtectedRoute path="/admin" component={AdminPage} />
      </Switch>
    </Router>
  );
};

5. Не забудьте реализовать методы аутентификации и авторизации на серверной стороне Django. Django предоставляет множество встроенных функций и возможностей для аутентификации и авторизации, таких как использование токенов, сессий, различные стратегии аутентификации и др. Вы можете выбрать наиболее подходящий для вашего проекта способ.

Исходя из вопроса, можно предположить, что вы используете Django REST Framework (DRF) для создания API. В таком случае, вы можете использовать готовые классы и методы DRF для аутентификации и авторизации.

Например, вы можете использовать классы в DRF, такие как TokenAuthentication и SessionAuthentication для аутентификации пользователя. Вы также можете настроить разрешения доступа, чтобы определить, какой пользователь имеет право на доступ к различным ресурсам в админке, используя классы разрешений DRF, такие как IsAuthenticated, IsAdminUser и другие.

from rest_framework.authentication import SessionAuthentication, TokenAuthentication
from rest_framework.permissions import IsAuthenticated, IsAdminUser

class AdminUserViewSet(viewsets.ModelViewSet):
    authentication_classes = (SessionAuthentication, TokenAuthentication)
    permission_classes = (IsAuthenticated, IsAdminUser)
    queryset = User.objects.all()
    serializer_class = UserSerializer

В итоге, чтобы получить доступ к админке Django (DRF API) из готового сайта на React, вам необходимо настроить аутентификацию и авторизацию на серверной и клиентской сторонах, а также использовать правильные маршруты и разрешения доступа в Django. Это позволит вам автоматически перенаправлять пользователей на страницу входа, если они не авторизованы, и обеспечит безопасный доступ к админке только для авторизованных пользователей.