Вступление
Front-end разработка продвинулась семимильными шагами по сравнению с начальными днями разработки для клиентов. Сообщество разработчиков внесло огромный вклад в создание фреймворков и библиотек, таких как angular и react. В нашем распоряжении несколько вариантов, поэтому ведутся споры о том, какие фреймворки выбрать. Я очень заинтересовался Vue.js из-за его простой кривой обучения и удобочитаемости кода. Ключевым моментом является то, что функциональность программы может быть расширена путем добавления плагинов с очень понятной документацией, представленной на официальном сайте https://vuejs.org/v2/guide/
Что такое аутентификация на основе ролей
Аутентификация на основе ролей - это подход к ограничению доступа к системе для авторизованных пользователей.
Допустим, вы создаете приложение для квартиры или объекта группового жилья, есть две роли пользователя:
- Житель: кто выполняет такие действия, как оплата счетов за обслуживание (только пример) и т. Д.
- Администратор: управляет всем набором резидентных учетных записей.
Наша повестка дня со стороны клиента - скрыть или ограничить определенные элементы для конкретного пользователя в зависимости от его конкретной роли.
Структура папки
Мы использовали Vue Cli для строительных лесов. Для установки посетите https://github.com/vuejs/vue-cli
Структура папок зависит от каждого разработчика. Я следовал нижеуказанному типу структуры для больших приложений. В папке компонентов создайте отдельные компоненты.
Учитывая вышеупомянутый вариант использования, есть три папки подкомпонентов (компонент администратора, компонент входа в систему, резидентный компонент).
Каждый субкомпонент будет состоять из всех элементов, таких как (файл .html, файл .scss, файл служб и файл .vue). Создается отдельная папка маршрутизатора, и все маршруты будут доступны в этой папке.
Общие компоненты, такие как верхний и нижний колонтитулы, добавляются как директивы, а не группируются как отдельные компоненты. Они используются в App.vue
Создание и реализация логики
Для существующего варианта использования создайте компоненты для входа в систему, администратора и резидента, а также создайте файл маршрута для трех компонентов.
Проверить аутентификацию
Первым шагом является вход в систему, учетные данные пользователя фиксируются, и из login.service.js учетные данные пользователя отправляются на сервер. Сервер успешно возвращается вместе с токеном и ролью.
Этот ответ сервера отправляется на login.vue, где, если ответ успешен, возвращаемые данные сохраняются в локальном хранилище. Если ответ является ошибочным, пользователь перенаправляется на страницу входа в систему.
Аутентификация на основе ролей
После того, как пользователь очистил аутентификацию, следующим шагом будет определение роли и ограничение последующего пути на основе роли пользователя. Для этого перейдите в index.js в папке маршрута.
Vue js предоставляет мета-поля маршрута, которые можно добавить как объект с ключом мета. Вы можете проверить документацию о том, как добавить мета-поля в маршрут (https://router.vuejs.org/en/advanced/meta.html)
После добавления метатега
Используйте средства навигации (https://router.vuejs.org/en/advanced/navigation-guards.html), чтобы проверить, разрешено ли пользователю входить на определенную страницу или не используется ли он для аутентификации и роли пользователя. Для выполнения этого действия используйте router.beforeeach, который является Global Guards (компонент навигационной защиты).
Кроме того, проверка аутентификации пользователя также может быть выполнена с помощью router.beforeeach, поскольку возвращаемые данные хранятся в локальном хранилище.
Следующим шагом является создание еще двух метатегов, одного для AdminAuth и Resident Auth. Основываясь на метатеге и используя router.beforeeach, мы определяем, какому пользователю разрешен определенный путь в зависимости от роли.
Например: администратор может получить доступ только к «/ admin».
Состояние Vuex
Vuex - это шаблон управления состоянием + библиотека для приложений Vue.js. Требуется знать, аутентифицирован пользователь или нет, и эта информация должна использоваться всеми компонентами. В данном случае кнопка выхода должна быть видна только в том случае, если пользователь аутентифицирован.
Скачать исходный код
Чтобы лучше понять, загрузите исходный код с GitHub и выполните следующую команду, чтобы запустить приложение.
cd project npm install npm run dev
