Как реализовать разлогин в ранее открытой вкладке при открытии приложения в новой вкладке?

Проблема возникает, когда приложение открыто в нескольких вкладках: пользователь выходит в одной, а в остальных он остаётся авторизованным. Это небезопасно и создаёт рассинхронизацию UI. Нужен механизм, который уведомит все вкладки одного origin о смене статуса аутентификации.

Способ 1: событие storage

Событие storage срабатывает в других вкладках того же origin при изменении localStorage или sessionStorage. Важно: в той вкладке, где произошло изменение, событие не срабатывает — только в остальных. Это идеально подходит для синхронизации logout.

// auth.js
function logout() {
  localStorage.removeItem('token');
  localStorage.setItem('logout', Date.now()); // триггер для других вкладок
  redirectToLogin();
}

window.addEventListener('storage', (e) => {
  if (e.key === 'logout' || e.key === 'token') {
    redirectToLogin();
  }
});

Способ 2: BroadcastChannel

Более явный и современный API. Позволяет отправлять произвольные сообщения между вкладками одного origin без хаков с localStorage.

const channel = new BroadcastChannel('auth');

function logout() {
  localStorage.removeItem('token');
  channel.postMessage({ type: 'LOGOUT' });
  redirectToLogin();
}

channel.onmessage = (e) => {
  if (e.data.type === 'LOGOUT') redirectToLogin();
};

Что учесть

• Событие storage не срабатывает в текущей вкладке — вызывайте logout локально.
• BroadcastChannel не поддерживается в старых браузерах (IE), нужен fallback на storage.
• При использовании httpOnly cookies синхронизация сложнее — потребуется polling или WebSocket.
• Не забудьте очистить Redux/Context state, а не только токен.

Итог: для синхронизации logout между вкладками используйте событие storage как базовый вариант или BroadcastChannel для более явной коммуникации; это гарантирует единое состояние аутентификации во всём приложении.