Alle geöffneten Tabs automatisch abmelden, wenn sich der Benutzer in einem davon abmeldet

Question

Ich habe eine Login-Seite basierend auf localStorage erstellt. Beim Laden der Seite habe ich den Wert von localStorage überprüft. Wenn ich die Webseite in mehr als einer Registerkarte geöffnet habe und mich dann von einer der Registerkarten abmelde, sollten sich alle verbleibenden Seiten automatisch ausloggen.

Wenn neu laden/aktualisieren bedeutet es abmelden.

Bitte helfen Sie mir, ein Skript auszuführen, wenn Benutzer die Seite anzeigen oder eine andere Möglichkeit sagen, um dieses Problem zu lösen.

Answer 1

Schreiben Sie einfach ein kleines Javascript, das alle 100ms überprüft (zB) ob die gespeicherte "Sitzung" in localStorage noch existiert. Wenn nicht, aktualisieren Sie die Seite. Sie könnten hierfür setInterval verwenden.

Answer 2

Werfen Sie einen Blick auf Page Visibility API for HTML5. Dies kann Ihnen helfen,

Answer 3

„local bleibt alle gespeicherten Daten auf unbestimmte Zeit auf dem Computer des Benutzers und über Browser-Tabs“ ^Source

Das bedeutet, dass, wenn Sie leer/entfernen Sie die Login-Daten, die Sie in eins gesetzt haben Registerkarte werden die Daten auch in allen anderen Tabs geändert.

Wenn sich der Benutzer also abmeldet, ändert sich die localStorage-Daten.
Dann auf Ihre Tabs, erkennen, wenn ein Benutzer Änderungen wieder auf der Registerkarte fokussieren das onfocus Ereignis mit:

function onFocus(){ 
//Reload Page if logged out (Check localStorage) 
    window.location.reload(); 
}; 

if (/*@cc_on!@*/false) { // check for Internet Explorer 
    document.addEventHandler("focusin", onFocus); 
} else { 
    window.addEventHandler("focus", onFocus); 
} 

Source

Das heißt, Sie werden nicht ständig werden Javascript ausgeführt wird, oder Neuladen (a möglicherweise große Anzahl von) Tabs gleichzeitig.

Answer 4

Sie können Storage events verwenden, um benachrichtigt zu werden, wenn localStorage-Werte geändert werden.

function storageChange (event) { 
    if(event.key === 'logged_in') { 
     alert('Logged in: ' + event.newValue) 
    } 
} 
window.addEventListener('storage', storageChange, false) 

Wenn zum Beispiel meldet sich eine der Registerkarten aus:

window.localStorage.setItem('logged_in', false) 

Dann werden alle andere Tabs ein StorageEvent erhalten wird, und eine Warnung wird angezeigt:

Logged in: false 

Ich hoffe, das beantwortet deine Frage!