Как фронтенд понимает, что мы авторизованы?

Question

[Александр Жарченко]

Я понимаю процесс авторизации как последовательность следующих шагов:
1. Мы отправляем авторизационные данные на сервер (логин, пароль);
2. Сервер присылает нам ответ, если он позитивный, то возвращает set-cookie, где устанавливает в cookie бразуера сессионный ключ;
3. При запросах cookie прокидываются и уходят на сервер. Так сервер понимает кто к нему обращается и что ему отдавать.

Ситуация следующая. Вот когда мне надо сделать logout, то я чищу куки и дело с концом. С сервера мне будет приходит 401 ошибка, я не авторизован.

Вопрос такой:
Во время работы приложения - каким образом фронтент понимает, что отображать? Авторизованную страницу с данными или экран авторизации.
То есть, при каждой загрузке страницы проверять, есть ли у нас данная кука с ключём и решать, что отображать? Или записать в localStorage и хранить там, чтобы иметь более простой доступ без парсинга строки?
Как понять на фронте, допустим на React, что мы авторизованы? Делать постоянно эту проверку?

Answer 1

[Дмитрий Беляев]

2. Сервер присылает нам ответ, если он позитивный, то возвращает set-cookie, где устанавливает в cookie бразуера сессионный ключ;

Притом set-cookie он возвращает с флагами secure (доступно только по https) и http-only (недоступно из js). Это единственный доступный вариант хранить сессионный ключ, чтоб его не угнали.

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

Делает запрос на эти данные, если успешно - пользователь авторизован, можно записать это в стейт в памяти, как и данные, если 401 - пишем в стейт и на основе этого у нас экран авторизации.
При отправке логина и пароля так же по ответу сервера можно понять что рендерить.

Answer 2

[freeExec]

Вот когда мне надо сделать logout, то я чищу куки и дело с концом.

Надо не куки очищать, а сессию завершать на сервере. Чтобы он при попытке работы с протухшим токеном давал отворот.

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

Надо обрабатывать ответы сервера, если он говорит, что не авторизован, то и показывать авторизацию.

Answer 3

[Василий]

Во время работы приложения - каким образом фронтент понимает, что отображать?

Зачем фронтеду что то понимать ?
фронт шлет запрос получает данные показывает, получает 401 показывает страницу с авторизацией, получает 403 сообщает дескать прав нет.
Все что следует делать фронту это слать с запросом куку, заголовок с ключем или еще как.