Как реализовать авторизацию на VUE и PHP?

Question

[RomyGalaxy]

с back-end-ом вопросов нет, саму авторизацию мне реализовать удалось на стороне vue делая POST запрос на форме с логином и паролем, при успешной авторизации получаю ответ JSON со значением accesss true или false в зависимости от успеха авторизации, вопрос в другом, как сделать так чтобы vue понял что авторизация успешна и запомнил это состояние + чтобы была возможность устанавливать на страницы в роутере правило для просмотра данной страницы в зависимости авторизован ли пользователь или нет

Comments

[Антон Антон]

просто установите на бэкэнде http-only кукис и все. И какой-то эндпоинт, доступный только авторизованным для проверки со стороны vue. при старте =- тыкайте туда, если работает - то загружайте данные, если ошибка 401, то переходите на роут авторизации

[RomyGalaxy]

Антон Антон, а как на стороне vue приложения это организовать правильнее ? у меня сейчас так примерно и происходит, что при авторизации отдается кука с sessionID back на php

[Сергей delphinpro]

а зачем в роутере что-то проверять?
любая страница получает какие-то данные от сервера для отображения.
если у пользователя нет прав, запрос на бэк вернет 403
соответственно, фронт покажет 403 пользователю

[Антон Антон]

Сергей delphinpro, 403 все-таки при нарушении прав доступа, может быть и у авторизованного пользователя такое, если есть роли и вот это всё.

а зачем в роутере что-то проверять?

не в роутере, а в запросе данных с бэка. Но в роутере тоже нужно, если заходят сразу не на главную, а на что-то закрытое.

[Антон Антон]

RomyGalaxy, ну в самом начале приложения тыкаю в бэк и определяю, залогинен или нет, кладу в стор, потом в хуке роутера beforeEach определяю, если не залогинен и маршрут требует авторизации - то запоминаю куда ломились и перенаправляю на страницу логина, затем после логина перенаправляю на исходную страницу.
Если залогинен и маршрут требует гостя (например страница регистрации), то перенаправляю на "домашнюю" страницу.

Также в axios добавлен интерсептор, который при ошибке 401 делает то же, что и при попытке незалогиненного зайти на "закрытую" страницу - запоминает, где мы есть, после логина отправляет обратно. Такое может быть если кука или токен протухли при долго открытой забытой вкладке или реализована функция "разлогинить на других устройствах"

[Сергей delphinpro]

Антон Антон,

не в роутере, а в запросе данных с бэка.

так и я о том же. это автор вопроса что-то пишет про роутер.
Обычная авторизация на сессиях. Получил ответ 4xx - показал юзеру, что ему нельзя этого делать.

403 все-таки при нарушении прав доступа, может быть и у авторизованного пользователя такое,

Вопрос терминологии. Неавторизованный пользователь - тоже пользователь, только с минимальными правами.
В принципе здесь подойдет 401.
Клиент запрашивает данные, получает 401 и рендерит форму логина.

Answer 1

[bqio]

Авторизация штука не легкая и может быть сложна для новичка, так как нужно учитывать многие моменты. Почитайте про реализацию через JWT токены.

Comments

[Антон Антон]

не надо jwt для spa. jwt следует использовать только в микросервисах с горизонтальным масштабированием инстансов сервиса, да и то не всегда.
Обычные токены или даже куки в большинстве случаев лучше.

вот тут чуть подробнее: https://habr.com/ru/articles/884912/

Answer 2

[Евгений]

Из собственного опыта, на странице в глобальный объект пишу массив параметров, и в vue это передаю.

<script type="text/javascript">
	window.user = JSON.parse('<?= json_encode($user, JSON_UNESCAPED_UNICODE) ?>');
</script>

Ещё, если это SPA надо делать периодические запросы чтобы сессия не отваливалась.

Comments

[RomyGalaxy]

почему-то мне кажется что это не очень безопасно так делать

[Евгений]

RomyGalaxy, а в чем собственно опасность? php смотрит сессию, и выдает данные в зависимости от этого. В объект user передаются данные которые ни как его не компрометируют ес-но. Это решение чтобы не делать лишний асинхронный запрос из vue на тот случай когда страница обновится.

А роуты это отдельная тема, их можно назначать динамически, все методы для этого есть, для проверки авторизации читайте раздел Navigation Guards в доке Vue Router.