Проверьте, есть ли у Axios файл cookie сеанса


Проверьте, есть ли у Axios файл cookie сеанса

19.08.2020 10:21:08 Просмотров 5 Источник

Я внедряю навигационную защиту для своего Vue.js приложение, проверяющее, вошел ли пользователь в систему. Я думаю, что лучше всего было бы спросить Axios, есть ли у него сессионный файл cookie или нет. Что-то вроде этого:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

Кроме, конечно, hasSessionCookie() не существует, и я не вижу ничего подобного в документах. Есть ли способ, может быть, каким-то расширением?

Да, я знаю, что могу сохранить статус входа в систему в магазине VueX. Я не думаю, что это хорошая идея, потому что состояние будет сброшено, если пользователь в своей бесконечной мудрости обновит страницу и таким образом сбросит приложение. Еще одно решение, которое я имею в виду, - это бэкэнд-конечная точка, где приложение может "спросить", вошло ли оно в систему. Но это тоже довольно неубедительно.

У вопроса есть решение - Посмотреть?

Ответы - Проверьте, есть ли у Axios файл cookie сеанса / Check if Axios has a session cookie

Akbar khan

19.08.2020 11:16:12

Вы идете в правильном направлении, но axios - это HTTP-клиент, и он не имеет ничего общего с файлами cookie, а также не заботится о файлах cookie или хранении.. поэтому вам нужно использовать такой пакет, как vue-cookies, чтобы установить и получить файлы cookie.

Owl

19.08.2020 11:54:24

Поскольку это файл cookie на стороне сервера, вы не можете проверить его на клиентском javascript, вам нужно сделать HTTP-запрос на ваш экспресс-сервер, чтобы проверить, существует ли сеанс. Создайте простой маршрут на вашем экспресс-сервере следующим образом:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

Затем проверьте свой Vue navigation guard:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}
Tamás Polgár

20.08.2020 02:45:30

Спасибо за все советы. Правильным решением было следующее:

  • VueX хранит статус входа в систему (просто логический флаг), который проверяет навигационная защита
  • Когда пользователь входит или выходит из системы, я устанавливаю флаг
  • Когда приложение запускается, я вызываю маршрут /checklogin на сервере до создания экземпляра Vue. Это просто возвращает код состояния 200 или 401 в зависимости от того, имеет ли пользователь действительный сеанс или нет. Затем я установил соответствующий флаг VueX. Таким образом, пользователь может обновить браузер, но VueX все равно будет знать, вошел он в систему или нет.
  • Кроме того, я добавил перехватчик Axios для обнаружения 401 ошибки. Если он есть, это означает, что сеанс истек. Затем он устанавливает флаг VueX в false и перенаправляет пользователя на страницу входа.

Я написал статью в своем блоге Medium с подробностями и фрагментами, если кому-то это интересно. https://medium.com/developer-rants/session-management-between-express-and-axios

generic3892372

01.11.2020 05:47:02

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

Магазин Vue:

Хранилище Vue предназначено для удобного расположения SPA для хранения такого флага (вошедшего в систему или нет), однако хранилище полностью стирается и восстанавливается с каждым экземпляром Vue, что означает новое окно / вкладку браузера, обновление или другое неожиданное событие, которое запускает обновление браузера.

Таким образом, ваш подход описывает дополнительный внутренний вызов для быстрой проверки состояния, что является законным и работоспособным решением IMO.

Есть также еще два потенциальных решения, второе из которых я реализовал в своем собственном СПА-салоне:

Два Других Решения

1) вообще не трогайте свой внутренний код. Используйте Vue-cookies, чтобы клиентский браузер установил файл cookie после того, как был установлен Логин (это будет полностью отделено от файла cookie только http, который нужен серверному API).

Этот файл cookie все еще должен существовать после обновления браузера. Однако я не использовал (и не пробовал) этот подход, так как не хотел возиться с изменением моего интерфейса, чтобы проверять локальный файл cookie каждый раз, когда я хочу проверить статус входа в систему.

Внешний код может использовать этот файл cookie, чтобы выяснить, вошел ли человек в систему или нет.

2) Другой, отдельный подход заключается в коротком замыкании обычной внутренней проверки API на аутентификацию только для контроллера этого конкретного маршрута, но не для любого другого маршрута.

Вот как будет работать "короткое замыкание" на задней панели:

В случае метода контроллера этого конкретного маршрута сначала проверьте наличие пользователя в запросе, а затем верните 200, но со статусом "false" или какой-либо другой переменной, которая также появляется в ответе success.

Это противоречит интуиции, но это дает интерфейсному вызову Axios что-то, за что можно ухватиться, а не просто стандартный ответ на ошибку.

Примечание: Я называю это "коротким замыканием", потому что если метод контроллера back-end API route имеет много кода, то выполнение этой проверки первым делом позволит избежать дорогостоящей части вызова.

Этот подход идеально подходит для моих нужд и не требует нового или вторичного вызова API.

Помочь в развитии проекта:
Закрыть X