Поддерживать актуальную сессию пользователя легко, вы можете сохранить сессию/токен в переменной 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();
    }
});