Как перезагрузить приложение на разных вкладках браузера с помощью JavaScript

Пользователи нередко просматривают веб-приложение на нескольких вкладках. Это помогает с организацией и может сосредоточить их внимание на определенном месте в приложении.

Однако, как только пользователь открывает приложение на нескольких вкладках; код приложения, по сути, выполняется несколько раз; хотя и отдельно внутри каждой отдельной вкладки. Что произойдет, если вы хотите запустить действие на одной вкладке; и чтобы одно и то же действие запускалось и на всех других открытых вкладках?

Давайте рассмотрим базовый сценарий: у аутентифицированного пользователя ваше приложение открыто на многих вкладках. Пользователь удаляется из приложения на одной вкладке и перенаправляется обратно на экран входа в систему. Как мы можем гарантировать, что это поведение немедленно сработает на всех других открытых вкладках?

LocalStrorage спешит на помощь. Данные LocalStorage являются общими для всего домена; поэтому другие открытые вкладки будут иметь доступ к тем же данным localStorage. С помощью JavaScript вы можете добавить прослушиватель событий для изменения localStorage; с помощью клавиши storage.

window.addEventListener('storage', (event) => {
    if (event.key === 'isAuthenticated' && event.newValue === 'no') {
        window.location.reload(true)
    }
});

Добавление этого прослушивателя событий позволяет синхронизировать изменения, внесенные в localStorage на одной вкладке браузера, с другими вкладками, на которых открыто веб-приложение. Когда пользователь выходит из приложения (т. е. когда значение isAuthenticated изменяется с 'yes' на 'no'), код запускает перезагрузку страницы. Это гарантирует, что каждая вкладка будет немедленно перезагружена, чтобы отразить обновленное состояние аутентификации.