Аутентификация пользователей в Symfony - с помощью Vue.js в качестве внешней среды
В этой статье я пропущу процесс аутентификации Symfony, поскольку его можно найти в официальной документации (это больше о представлении решений в случае использования Vue.js):
Аутентификация на основе токена JWT - должно ли быть так?
Vue.js позволяет нам либо создать SPA (одностраничное приложение), либо использовать его в форме или гибриде, где мы можем внедрить компоненты в уже существующий код или используйте Vue.js как расширение текущего кода внешнего интерфейса (В этом случае я на собственном опыте узнал, что это может стать очень беспорядочным - вы можете найти больше здесь ) - в обоих случаях аутентификация может быть реализована / решена по-разному.
Лично я даже не собирался тестировать оба решения, так как гибридное работает очень хорошо, но - у меня уже был шанс увидеть интересную / запутанную аутентификацию в Symfony с помощью JWT для проверки пользователя на интерфейсе на основе Angular (в этом случае решение / конечная цель отличались от простой формы входа).
В общем, решение JWT работает, делает все, что должно, проблем нет - так в чем же смысл? Поскольку Vue.js - это первый современный JS-фреймворк, который я использовал самостоятельно вместе с серверным фреймворком, я подумал:
«Мне действительно нужно использовать некоторые токены, поскольку авторизация Symfony больше не работает так, как должна? Всегда ли так в современном JS? »
Короче говоря, это не должно быть так, на самом деле для процесса аутентификации не требуется никакого волшебного, специального токена - хотя полный SPA требует особой логики, но по-прежнему « почти ”стандартная логика Symfony.
Самое простое решение - гибридная аутентификация
В этом случае логин из работы - это единственная страница, которая полностью отображается Twig - здесь не используется логика js, поэтому используется обычный процесс аутентификации.
- Страница аутентификации - простой шаблон на основе Twig с маршрутом входа.
2. Маршрут аутентификации - маршрут для возврата на страницу входа
И это все (естественно, при условии, что проект уже настроен для использования аутентификации Symfony, представленной в ссылках выше), аутентификация уже работает на этом этапе - просто добавьте несколько правил в security.yaml, и все будет работать, как задумано.
Имейте в виду, что каждый маршрут, добавленный с помощью Vue-Router, также должен присутствовать в Symfony, иначе как серверная часть узнает, к какой странице был осуществлен доступ? В конце концов, Vue.js только вставляет новое состояние в историю браузера, если не используется простой location.pathname = url.
Добавление маршрутов Vue.js в Symfony
Лично у меня есть очень простое решение для этого, которое определяет один метод (с базовым шаблоном веточки для него - он содержит Mount #id для Vue-App). :
- Обработчик в серверной части
2. Веточка с mountig #id
При этом - если мы откроем новую вкладку страницы SPA, она по-прежнему будет работать, поскольку это всего лишь шаблон, который позже в процессе будет перестроен / контролируется Vue.js.
3. Монтирование Vue.js
Сложное решение - проверка подлинности вызова API
В этом решении все обрабатывается в Vue.js, кроме использования базового шаблона Twig (просто прокрутите вверх до «Добавление маршрутов Vue.js в symfony ).
- Средство проверки подлинности входа (серверная часть)
Так что же особенного в этом аутентификаторе?
Ответ - это важно, это JsonResponse (BaseApiDTO), который используется во внешнем интерфейсе для каждого вызова.
2. Обработка вызовов в Vue.js (интерфейс)
3. Ответ
4. Выйти пользователя
Подведение итогов
Оба решения работают как шарм, но если бы мне пришлось выбрать более быстрое, то это определенно гибридное.
Имейте в виду, что для обоих решений требуется отправлять JsonResponse на передний план, поэтому рекомендуется использовать некоторый BaseResponse, который всегда будет состоять из статуса аутентификации пользователя. .
