Поддерживать актуальную сессию пользователя легко, вы можете сохранить сессию/токен в переменной js, в файле cookie или в локальном хранилище. Однако, если пользователь открывает несколько вкладок/окон для одного и того же веб-сайта, некоторые из них могут содержать обновленные данные в режиме ожидания.
Например, вошедший в систему пользователь открывает вкладку A и B, нажимает кнопку выхода на вкладке A, и, таким образом, сеанс пользователя на вкладке A очищается. Когда он переключается на вкладку B, он по-прежнему показывает свое имя пользователя или аватар или любую защищенную информацию. . Хотя пользователь больше не сможет выполнять какие-либо вызовы API на вкладке B из-за истечения срока действия сеанса, показывать устаревшую защищенную информацию, если пользователь вышел из системы, может быть нецелесообразно.
Один из способов уведомить другие вкладки/окна — через локальное хранилище с прослушивателем событий.
Вспомним память, сохранение элемента в localstorage происходит по
window.localStorage.setItem('key', 'value');
Это действие автоматически вызовет событие storage
. Чтобы зафиксировать событие, вы можете добавить прослушиватель событий, подобный этому
window.addEventListener('storage', () => {
console.log(window.localStorage.getItem('key'));
});
Обратите внимание, что прослушиватель событий не сработает на вкладке, выполняющей setItem
. Это означает, что когда вы устанавливаете элемент на вкладке A, только вкладка B будет выполнять console.log
.
Полный пример
var state = 'LOGGED_OUT'; function login() { // perform login state = 'LOGGED_IN'; window.localStorage.setItem('state',
state); } function logout() { // perform login state = 'LOGGED_OUT'; window.localStorage.setItem('state',
state); }window.addEventListener('storage', () => { var latestState = window.localStorage.getItem('state')); if (state !== latestState && latestState === '
LOGGED_OUT') { logout(); }});