Laravel + Vue.js + SPA как работать в SPA авторизованному пользователю?

Question

[Антон Шелестов]

Всем привет.
Только начал изучать Vue и решил попробовать слеоать небольшую админку в стиле SPA приложения. И не понял как работать в такой админке авторизованному пользователю.

Сейчас у меня такая наработка:
1. Авторизация, регистрация и тд работает на обычных post get запросах без Vue
2. А админка(после авторизации) уже использует Vue

И уже в коде самой админки, код типа:
if(Sentinel::check())
Не работает... всегда false возвращает даже если ранее удачно авторизовался...

Смотрел jwt-auth.readthedocs.io/en/develop, но как-то совсем непонятная вещь...

Может кто посказать как правльно настроить авторизацию в SPA приложении?
Спасибо

Comments

[ⓒⓢⓢ]

Может кто посказать как правльно настроить авторизацию в SPA приложении?

Да так же, как и если бы это было приложение без слов SPA\Vue - всё тоже самое, храните где-то авторизацию на стороне клиента, это будет скорее всего токены. В приложении берёте эти токены и проверяете на валидность post\get запросами

Можете ещё посмотреть на пакеты, чтобы упростить работу
vuex, vue-auth, vue-axios, vuex-rest-api

Answer 1

[Дмитрий Новиков]

А почему бы не вынести авторизацию во Vue?
При авторизации клади данные о юзере в localstorage, которые тебе отдаст бек. При перезагрузке страницы проверяй есть ли инфа в storage. Если нет, то пробуй ее запросить с бека, авторизован ли ты там. Если да, то заполни сторедж еще раз, если нет, то выбрасывай к чертям на авторизацию

Answer 2

[Андрей К]

По сути можно разделить на два варианта.

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

2. Полноценная авторизация на основе токена, ее нужно оформлять и на клиенте, и на сервере. Как я понимаю, современный подход - это JWT. В этом случае клиент и сервер вообще могут быть не связаны, просто реализуют общее API.