Аутентификация Vue и обработка маршрута с помощью Vue-router

Аутентификация Vue и обработка маршрута с помощью Vue-router

От автора: Vue — это прогрессивный фреймворк Javascript, который упрощает создание приложений с интерфейсом. В сочетании с vue-router мы можем создавать высокопроизводительные приложения с полными динамическими маршрутами. Vue router — эффективный инструмент и может легко обрабатывать аутентификацию в нашем Vue-приложении. В этом уроке мы рассмотрим использование vue-router для проверки подлинности и контроля доступа для разных частей нашего приложения.

Начало работы

Для начала установите Vue cli и создайте с его помощью приложение:

Следуйте инструкциям по установке и завершите установку этого приложения. Если вы не уверены в опции, просто нажмите клавишу возврата (клавиша enter), чтобы продолжить настройку по умолчанию. Когда вас попросят установить vue-router, примите этот параметр, потому что нам нужен vue-router для этого приложения.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Установка сервера Node.js

Затем мы настроим сервер Node.js, который будет обрабатывать аутентификацию для нас. Для нашего сервера Node.js мы будем использовать SQLite в качестве базы данных по выбору. Для установки драйвера SQLite выполните следующую команду:

Поскольку мы имеем дело с паролями, нам нужен способ хешировать пароли. Мы будем использовать bcrypt для хеширования всех наших паролей. Для его установки выполните следующую команду:

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

Чтобы прочитать данные json, которые мы отправим на наш сервер, нам нужен body-parser. Для его установки выполните следующую команду:

Когда все будет готово, создадим простой сервер nodejs, который будет обрабатывать аутентификацию пользователя. Создайте новый каталог с именем server. Здесь мы будем хранить все, что мы будем использовать для создания нашего узла. В каталоге сервера создайте файл и сохраните его как app.js. Добавьте к нему следующее:

В приведенном выше файле мы импортировали все пакеты, необходимые для настройки сервера. Мы сделали небольшую конфигурацию, чтобы разрешить доступ для запросов, поступающих извне нашего сервера. Так мы в основном обрабатываем CORS. Если это ваш первый опыт работы с CORS, просто знайте, что многие разработчики в прошлом потратили сотни часов на вырывание волос, задаваясь вопросом, почему простой запрос не работает. Это было печальное время.

Затем мы продолжили определять разные маршруты для нашего сервера и то, что должен делать наш сервер, когда пользователь делает запрос на маршрут. Наконец, мы создали сервер на port: 3000 или любой динамически сгенерированный порт нашей системой (heroku генерирует динамические порты).

Затем создайте еще один файл config.js в том же каталоге и добавьте к нему следующее:

Наконец, создайте еще один файл db.js и добавьте к нему следующее:

Мы создали класс для нашей базы данных, чтобы абстрагировать основные функции, которые нам нужны. Вы можете использовать более общие и многоразовые методы здесь для операций с базой данных и, вероятно, использовать promise для большей эффективности. Это позволит вам создать репозиторий, который вы можете использовать со всеми другими определяемыми вами классами (особенно если ваше приложение использует архитектуру MVC и имеет контроллеры).

Все сделано и выглядит хорошо, давайте сделаем vue-приложение.

Обновление файла Vue-router

Файл vue-router можно найти в ./src/router/. В файле index.js мы определим все маршруты, которые нужны нашему приложению. Это отличается от того, что мы сделали с нашим сервером, и его не следует путать.

Откройте файл и добавьте следующее:

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

Если вы посмотрите на определения маршрута, вы заметите, что некоторые маршруты имеют свойство meta. Это свойство meta позволяет нам определить дополнительные условия для проверки перед тем, как разрешить пользователю видеть страницу / монтировать компонент или перенаправлять пользователя на другую страницу. В этом определении маршрутизатора мы использовали свойство meta со значениями is_admin, is_admin и guest.

У маршрутизатора Vue есть метод beforeEach, который вызывается перед обработкой каждого маршрута. Здесь мы можем определить наше условие проверки и ограничить доступ пользователей. Метод принимает три параметра — to, from и next. To – куда пользователь хочет перейти, from – откуда пользователь приходит, и next — функция обратного вызова, которая продолжает обработку запроса пользователя. Наша проверка находится на объекте.

Мы проверяем несколько вещей:

если маршрут requiresAuth, проверяем токен jwt, показывающий, что пользователь вошел в систему.

если маршрут requiresAuth и предназначен только для пользователей admin, проверяем auth и проверяем, является ли пользователь администратором

если маршрут требует guest, проверяем, зарегистрирован ли пользователь

Мы перенаправляем пользователя на основании того, что мы проверяем. Мы используем имя маршрута для перенаправления, поэтому убедитесь, что вы используете его для своего приложения.

ВАЖНО: всегда убедитесь, что вы вызываете next() в конце каждого условия, которое вы проверяете. Это делается для предотвращения сбоя вашего приложения в случае, если есть условие, которое вы забыли проверить.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Определение компонентов

Чтобы проверить, что мы создали, давайте определим несколько компонентов. В каталоге ./src/components/ откройте файл HelloWorld.vue и добавьте следующее:

Создайте новый файл Login.vue в том же каталоге и добавьте следующее:

В файле Login.vue мы определили компонент входа. Мы определили метод обработки представления пользователя и входа пользователя в систему. Затем создайте файл Register.vue и добавьте в него следующее:

Код похож на структуру файла Login.vue. Он создает компонент регистра и сопровождающий метод для обработки заявки пользователя на регистрационную форму. Теперь создайте файл Admin.vue и добавьте следующее:

Это компонент, который мы установим, когда пользователь посещает страницу администратора. Наконец, создайте файл UserBoard.vue и добавьте следующее:

Это файл, который мы увидим, когда пользователь зайдет на страницу панели мониторинга. По компонентам все.

Глобальная установка Axios

Для всех наших запросов на сервер мы будем использовать axios. Axios — это клиент HTTP на основе promise для браузера и node.js. Для установки axios выполните следующую команду:

Чтобы сделать его доступным для всех наших компонентов, откройте файл ./src/main.js и добавьте следующее:

Определив Vue.prototype.$http = Axios, мы модифицировали vue-движок и добавили аксиомы. Теперь мы можем использовать axios во всех наших компонентах this.$http.

Запуск приложения

Теперь, когда мы закончили работу с приложением, нам нужно собрать все наши файлы и запустить его. Поскольку у нас есть узел js-сервера вместе с нашим vue-приложением, мы будем использовать оба из них, чтобы наше приложение работало.

Давайте добавим скрипт, который поможет нам запустить наш node server. Откройте файл package.json и добавьте следующее:

Мы добавили server скрипт, чтобы помочь нам запустить node server. Теперь запустите следующую команду для запуска сервера:

Должно отобразиться примерно следующее:

Затем откройте еще одну консоль и запустите приложение vue:

Команда соберем все файлы и запустит приложение. Можете открыть ссылку, по ней вы увидите приложение.

Заключение

В этом руководстве мы узнали, как использовать vue-router для определения проверок на наших маршрутах и предотвращения доступа пользователей к определенным маршрутам. Мы также узнали, как перенаправить пользователей в разные части нашего приложения на основе состояния аутентификации. Мы также создали мини-сервер с Node.js для обработки аутентификации пользователей.

То, что мы сделали, является примером того, как управление доступом проектируется в таких системах, как Laravel. Вы можете посмотреть vue-router и посмотреть, какие еще интересные вещи вы можете сделать с этим.

Автор: Chris Nwamba

Источник: https://scotch.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree