Фронтенд-разработка - это основная часть Интернета, и в последние годы она быстро выросла. С ростом числа инструментов сборки и множества фреймворков javascript он стал намного сложнее. Бизнес-организации уделяют больше внимания разработке внешнего интерфейса, чтобы улучшить взаимодействие с пользователем, эффективность сайта, интерактивность и внешний вид.
Развитие JavaScript, особенно в последний год. 2018 год был годом множества действий, изменений и новых инициатив в интерфейсной веб-разработке. Выбор в пользу того, чтобы стать предпочтительным фреймворком JavaScript, стал горячим, поскольку все больше проектов начали выбирать React js, включая Vue вместо Angular, а затем и другие фреймворки до сегодняшнего дня.
Я лично предпочел Vue из-за следующих сильных сторон:
- Простота
- Модульность
- Масштабируемость
- Гибкость
- Легкий вес
- Зрелость фреймворка
В настоящее время он имеет 125 083 звезды Github и оставил позади многие другие лучшие инструменты разработки интерфейса. Впервые он был выпущен в 2013 году. За последние 4–5 лет достигнут значительный прогресс благодаря его активным участникам и сторонникам.
В этом руководстве мы узнаем, как сохранить токен локально на вашем компьютере и установить средства защиты маршрутизатора, чтобы предотвратить несанкционированный доступ к маршрутам для входа нового пользователя и регистрации действительного пользователя в нашей базе данных. Наконец, мы перейдем к уничтожению токена во время выхода из системы.
Настройка:
Теперь давайте погрузимся в аутентификацию приложения vue с помощью Vue-router, Vuex и Axios. Я предполагаю, что у вас установлен Vue CLI 3 и выполнены другие необходимые настройки. Во-первых, мы создадим наше приложение с помощью нашей команды CLI.
Здесь мы создали новый проект с именем vue-auth. Я включил vue-router, vuex и axios для наших HTTP-запросов. Мы также использовали Tailwind CSS для нашей CSS-структуры. Tailwind написан на PostCSS и настроен на JavaScript, что означает, что мы должны иметь всю мощь настоящего языка программирования.
Итак, мы внесли некоторые необходимые изменения, и пока экран выглядит так.
На данный момент мы сделали то, что мы настроили наши маршруты в двух отдельных представлениях. Мы немного изменили стиль с помощью Tailwind. Теперь давайте посмотрим на фрагмент кода:
Наш логин:
Мы создадим файл login.vue, в котором напишем следующий код:
В приведенном выше коде у нас есть поля ввода с директивой v-model, которая содержит значение соответствующих держателей ввода. И мы будем иметь наши значения, которые будут возвращены ниже в тегах скрипта.
После приведенного выше кода мы займемся нашим магазином и внесем некоторые необходимые изменения, чтобы получить и сохранить токен локально внутри браузера.
В приведенном выше коде мы сохранили наш токен в нашем локальном хранилище, который мы получили от нашего бэкэнда, в значение token. Мы также проверили, вошел ли пользователь в систему или нет. Данные, полученные от модели, отправляются через нашу конечную точку API с использованием axios. Далее нам нужно отправить созданный нами метод getToken, взгляните на следующий код.
Здесь мы связали несколько вызовов с помощью then () с нашей функцией loginAction, которая в конечном итоге приведет нас к следующему желаемому маршруту. Теперь у нас есть весь наш код, работающий нормально, проблема в том, что мы можем попасть на любой маршрут, теперь нам нужно разместить некоторые защитные устройства маршрутизатора для наших маршрутов, которые мы поместим в наш основной файл main.js и добавим некоторые метаданные в наш файл router.js.
Мы добавили новый маршрут в наш файл маршрутизатора с именем ourApp, который мы протолкнем наш маршрут после успешного завершения входа в систему. Мы поместили некоторое метаполе в наши обработчики маршрутов, назвав needVisitors и needsAuth для соответствующих полей маршрута. А также мы закодировали несколько маршрутизаторов-охранников вместе с метаданными, полученными с наших маршрутов.
Наш Реестр:
Для регистрации нового пользователя мы собираемся внести некоторые изменения в наш файл register.vue, который служит отдельным представлением для приложения. Давайте свяжем входные значения и используем наш магазин для отправки некоторого действия новому пользователю.
Здесь мы сформировали нашу функцию validateBeforeSubmit, которая будет вызываться до того, как привязки ввода формы будут отправлены в базу данных с помощью метода POST. Мы также установили vee-validate, импортированный в main.js, в качестве наших зависимостей разработки, которые будут проверять, есть ли какие-либо ложные данные в полях.
После действия регистрации он вызовет хранилище для отправки действия с помощью userRegister. В store.js мы сделали наше действие, которое выглядит следующим образом:
Наряду с действительными данными в нашей модели vue у нас есть три поля данных, размещенных в базе данных с помощью метода POST. Теперь следующий шаг - уничтожить токен, который мы храним локально.
Клиринговый пользователь:
Давайте сначала создадим нашу кнопку выхода из системы в ourApp.vue, а затем перенаправим в Logout.vue, где мы отправим destroyToken из магазина. В магазине у нас есть имя функции, с которой мы будем иметь заголовки нашей аутентификации и размещать их в базе данных. Мы проверим, является ли токен состояния нулем или нет, и продолжим выполнение функции.
Наконец, мы удалим токен, хранящийся в нашем локальном хранилище, во время выхода из системы. Токены - это чистый объект JavaScript. Если мы создаем одностраничный сайт, использование чего-то вроде локального хранилища означает, что ваши веб-страницы могут работать независимо от любого веб-сервера. Вам понадобится только хранилище браузера, и нет необходимости хранить какие-либо данные на сервере.
Кроме того, еще одна замечательная вещь в локальном хранилище - это ограничение на размер: мы можем использовать его для кэширования данных для последующего использования. Но в случае файлов cookie это не так, поскольку существует ограничение на размер 4 КБ, в то время как локальное хранилище обеспечивает не менее 5 МБ для хранения данных во всех основных веб-браузерах.
Использованная литература:
Поскольку JWT - довольно новая концепция, библиотеки на всех языках могут быть не найдены. Кроме того, ни JWT, ни сеансы не решают проблемы CSRF или XSS, поскольку это полностью зависит от того, как мы отправляем данные. JWT быстр для разработки, менее настраиваемый, рискованный и немного сложный для понимания.
Но до сих пор ведутся споры о том, лучше ли файлы cookie или токены для хранения данных. Лично я предпочитаю использовать токены, так как это намного проще и широко используется разработчиками.
Спасибо за прочтение. Удачного кодирования !!
