React - Как войти в систему пользователю через бэкенд Django?

Предыстория

В качестве учебного упражнения я сначала создал сайт, используя только Django; затем я изучил React (все еще в процессе) и переносил в него фронтенд-часть, а Django использовал только как бэкенд. У меня они находятся на 2 разных адресах 127.0.0.1:3000 и 8000.

Теперь, я создал все виды API, где React может получать и отправлять данные в Django, чтобы читать и манипулировать БД, Логин это в основном единственное, чего мне все еще не хватает. Я думаю, что это, вероятно, связано с тем, что я позволил Django обрабатывать все вещи для логина, делая минимальную работу.

Ситуация

Итак, на данный момент в Django логин работает следующим образом:

settings.py:

LOGIN_URL = '/users/login/'
LOGIN_REDIRECT_URL = '/users/'

url.py:

path('login/', auth_views.LoginView.as_view(template_name='registration/user_login.html'), name='user_login'),

user_login.html (сокращенно):

{% block body %}
{% if form.errors %}
        <p>
            Your username and password didn't match. Please try again.
        </p>
    {% endif %}

    <form method="post">
        {% csrf_token %}
        <table>
            <tr>
                <td>{{ form.username.label_tag }}</td>
                <td>{{ form.username }}</td>
            </tr>
            <tr>
                <td>{{ form.password.label_tag }}</td>
                <td>{{ form.password }}</td>
            </tr>
        </table>
    <input type="submit" value="login" />

    {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
    {% else %}
        <input type="hidden" name="next" value="{% url 'registration:main_page' %}" />
    {% endif %}
    </form>
{% endblock %}

Все это работает. Но я слабо представляю, что происходит за этим, и это плохо. Обычно я пытаюсь написать свой собственный код, чтобы понять, что происходит, но в этот раз я не смог, и принял это "стандартное" решение, которое можно найти во всем Интернете.

Вопрос

Как мне реализовать это в React?

Что я попытался сделать на данный момент, так это:

  1. Создание страницы входа
  2. Создание формы и кнопки отправки
  3. Отправка данных с помощью POST-запроса через Django
  4. Получение Django данных для входа в систему через API
  5. Использование функции login в Django, используя полученные учетные данные (возврат успешного входа)

Отныне у меня есть пользователь и пароль в Django, но я просто не знаю, как с ними обращаться. Более того, я увидел несколько проблем в этом процессе.

  1. (3) Данные отправляются в незашифрованном виде. Обычный текст. Это не годится. (сейчас это не моя основная проблема, но поскольку мне все равно нужно ее реализовать, возможно, стоит решить ее сейчас, а не позже)
  2. (5) Функция входа работает, но я не знаю, как "передать" ее в React.
  3. Даже если мне удастся передать эту информацию в React (а мне кажется, что однажды мне это удалось), как мне сохранить состояние вошедшего пользователя? Например, метод 'is_authenticated', и 'request.user', чтобы увидеть, кто является активным пользователем?
    4. .

В дополнение ко всему этому, я бы также потребовал функцию выхода из системы, если это возможно.

Заранее спасибо.

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