javascript - 当用户注销其中一个选项卡时，如何自动从所有打开的选项卡中注销用户？

Question

我创建了一个登录页面以及许多其他页面，其中包含检查 session 的代码。如果用户没有 session ，则所有页面将重新加载并重定向到注销页面。该脚本每三秒调用一次。

我编写的代码运行良好，但我想以另一种方式实现它。当用户注销时，所有打开的选项卡都会重新加载/刷新，从而导致用户注销。这可能吗？

sessioncheck.php:

<?php
session_start();
if(isset($_SESSION['username']) && $_SESSION['username'] != ''){
    echo "true";
}
else {
    echo "false";
}
?>

此代码在每个页脚中:

<script>
    function gettatus(){
        $.get("sessioncheck.php", function(data){
            if(!data) {
                window.location = "logout.php";
            }
            setTimeout(function(){
                checkLoginStatus();
            }, 3000);
        });
    }
    $(document).ready(function(){
        gettatus();
    });
</script>

Answer 1

当 ajax 有用时

每 3 秒向服务器发出一次 ajax 请求很有用，以防万一 1.您在不同的浏览器中打开了标签页 2. 或在许多计算机中。 3. 或者你使用非常旧的浏览器

设置 cookie 不起作用。

使用设置 cookie 的方法不起作用，因为一个选项卡不知道另一个选项卡中更改的 cookie。这是因为标签 A 的 document(cookie 是从 getCookie 获取的)在没有请求服务器的情况下不会改变。您可以打开 SO 的两个选项卡并尝试在一个选项卡中设置 setCookie('name', 'val', 1) 并在另一个选项卡中查看 document.cookie .

如何让其他标签立即知道注销

如果您需要注销同一浏览器的所有选项卡，最好在选项卡之间传递信号。有几种方法，我想告诉你使用 localStorage (demo here)。

您可以将监听器附加到 storage 事件(更改存储项时触发)并发送 logout-event 信号。

localStorage.setItem('logout-event', 'logout' + Math.random());

每个其他选项卡都会通过监听器获取它。

window.addEventListener('storage', function(event){
    if (event.key == 'logout-event') { 
        // ..
    }
});

如果旧浏览器没有 localStorage

您可以使用两种方法 - localStorage 和自动刷新，例如每 60 秒一次，以确保在不同计算机上打开选项卡时它可以正常工作。如果 localStorage 不起作用(非常旧的浏览器)，每 3 秒自动刷新一次。

following fiddle shows如何处理。

还有什么？

您可以使用 node.js + socket.io在用户的所有浏览器之间发送信号。它运行迅速，并且会在每台设备上注销用户，但它比普通的 jQuery 更难处理。