Как реализовать авторизацию Vue + Php
У меня есть приложение написано на Vue.js + php. Я не знаю способ, который помог бы организовать авторизацию пользователя, чтобы потом на странице я могу увидеть свои данные. Есть способ это организовать без сторонних библиотек?
Ответы (1 шт):
Раз у вас стек vue+php то vue общается с php через api запросы.
- У вас должна быть форма на Vue с логином и паролем, при отправке которой происходит POST запрос к PHP на авторизацию.
- Со стороны сервера должна быть БД пользователей с полями: логин, хэш пароля, ключ сессии, дата входа (или срок жизни, как хотите).
Если хотите ходить с нескольких устройств, уместно таблицу пользователей и сессий разделить на две отдельные и класть туда еще ip, useragent и прочие полезные вещи, которые позволят повысить безопасность.
При запросе на авторизацию на сервере проверяем логин и пароль по базе, если такие есть, генерируем ключ сессии, пишем его в базу вместе с датой входа (или сроком жизни) и отдаем этот ключ обратно в Vue в ответе на запрос.
В качестве сессионного ключа можно использовать хэш (например sha256) от логина, метки времени и какой-нибудь соли.
На стороне Vue запоминаем полученный ключ и добавляем его в заголовок всех остальных запросов к серверу по которым будем получать персонализированные пользовательские данные.
Во всех остальных запросах на стороне сервера, перед тем как выполнить сам запрос, ищем ключ в БД. Если нашли и дата не истекла, возвращаем ответ на запрос (с учетом того пользователя, которому принадлежит ключ). В противном случае возвращаем заголовок 401 (Unauthorized) который скажет Vue о том, что авторизация протухла/недействительна и надо снова показывать форму входа.
Частой практикой является делать периодические фоновые запросы на сервер на предмет того, не истекла ли авторизация и если да, то разлогинить пользователя на клиенте.
Совсем по-хорошему все запросы между клиентом и сервером должны быть подписаны на JWT но вы вряд-ли обойдетесь без сторонних библиотек (js php) для его реализации.