Как реализовать авторизацию SPA?

Question

[Тихон Ермаков]

Добрый день!

Приложение с Sanctum и React.

0. Отправляем Get запрос на /sanctum/csrf-cookie чтобы инициализировать CSRF-защиту.
1. Отправляем пользовательские данные на метод authenticate и, при удачном раскладе получаем cookie.

1.1 Авторизованы мы или нет, cookie будут в любом случае. Это важно.

2. Сделали dispatch на фронтенде и в состоянии приложения мы указали, что мы авторизовались.

3. При перезагрузке страницы, как мы должны проверять или узнать о том, что пользователь авторизован?

На мой взгляд, есть несколько вариантов...

1. Отправлять Get запрос на /api/user.
2. В blade создать глобальную переменную, где директивами auth @endauth мы будем писать состояние. для примера можно так: window.isAuthenticated: true or false; window.user = auth::user;
3. Лезть в localStorage и там отмечать что-то.

Как реализовать это грамотно?

Comments

[t800zippygod]

Можете погуглить про JSON Web Token. Плюс в инете есть примеры реализаций этой технологи в связке GraphQL и Apollo.
Можете попробовать вписать в ваш проект.
Это так, наводочка

[Тихон Ермаков]

t800zippygod, Я знаю и писал авторизацию на JWT. Это совершенно разные методы аутентификации. Используя JWT, мы после аутентификации должны сохранить его в какую-то ячейку. Ячейкой может быть как localStorage так и кука. Здесь мы ничего не сохраняем.

[Sanes]

Тихон Ермаков, чем ваш реакт отличается от обычного VUE на фронте?

[Тихон Ермаков]

Sanes, Решают одну и ту же задачу. Отличаются тем, что я с Vue не знаком.