Создание web-сервиса. Всё, но не сразу. Авторизация в клиентской части.

Сегодня мы рассмотрим авторизацию на клиенте. Да начнём с авторизации, а не с регистрации. Так как я уже зарегистрирован как супер пользователь).

Для начала установим CORS на Django. CORS — необходим для получения данных с ресурсов, находящихся на другом домене, так называемый кроссдомен.

Для установки нам потребуется активировать виртуальное окружение. В консоли открываете папку с вашим виртуальным окружением и активируете его командой:

source bin/activate

Далее устанавливаем cors для Django.

pip3 install django-cors-headers

Переходим в файл setting.py вашего проекта.

В словарь INSTALLED_APPS добавляете приложение:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

Спускаемся ниже и добавляем в MIDDLEWARE:

MIDDLEWARE = [ 
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Middleware - это промежуточный слой, через него проходят запросы и ответы.
Далее укажем настройки для cors.

Разрешаем куки для межсайтовых запросов:

CORS_ALLOW_CREDENTIALS = True

Список разрешённых ресурсов:

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:3000'
)

Разрешённые методы и заголовки. Для этого импортируем библиотеку corsheaders:

from corsheaders.defaults import *

CORS_ALLOW_METHODS = default_methods
CORS_ALLOW_HEADERS = default_headers

На этом установка и настройка CORS закончена.

Переходим к самой авторизации

Для этого нам необходимо будет запустить бекенд

python3 manage.py runserver

Перед тем как запустить nuxt создайте в папке page файл login.vue — страница нашей авторизации, и запускайте фронтенд:

npm run dev

Код очень громоздкий, полный листинг в конце статьи.

В теге template мы описываем, то что увидим — вёрстку. Вёрстку формы я взял с https://bootstrap-vue.js.org/ и переделал её под свои задачи. Форма — группа формы (label и input). На форму повешен обработчик @submit="onSubmit".
Это означает, что при нажатии на кнопку типа submit сработает функция onSubmit, которую опишем ниже.

После template и идёт script, так называемый обработчик.

Первым делом в нём импортируем axios, о котором говорили в прошлом уроке:

import axios from 'axios'

и прописываем export default.

Далее опишем метод data. Метод data необходим, потому что он подгружается перед загрузкой страницы.

В нём опишем переменные данных полей формы, потом из них мы получим логин и пароль.

В методе mounted мы сохраним в нашем браузере токен и логин.

Объект methods содержит в себе необходимые нам функции, а точнее функцию onSumbit.

Первым делом мы запрещаем дефолтное действие кнопки. И формируем запрос к нашему API с помощью axios.

Отправляем username и password серверу, если он отвечает, то проверяем вернул ли он нам token, если да, то сохраняем в локальное хранилище браузер токен и логин юзера.

Вот так просто мы получили токен для юзера.

Почему мы не использовали Vuex? Потому что он хранит данные до полного обновления страницы. В свою очередь localStorage хранит данные в браузере по подобию кук.

Листинг login.vue

Заглавное изображение с сайта Ответ Mail.ru

Данный пост подготовлен автором @zheev. В рамках данного цикла статей он расскажет о том, что и как он программировал, какие языки и технологии использовал. С какими трудностями пришлось столкнуться и их решение на реальных примерах.

Первая часть - Вступление
Вторая часть - Проектирование БД
Третья часть - Установка окружения
Четвёртая часть - Установка и настройка Django
Пятая часть - Установка и сборка Vue
Шестая часть - Создание таблиц средствами Django
Седьмая часть - Создание REST приложений на Django
Восьмая часть - Использование фреймворка Nuxt в приложении на Vue
Девятая часть - Делаем авторизацию в Django