javascript - 多个选项卡同一个 session ，当所有选项卡都消失时清除 session

Question

所以我最近有一个我正在构建的网站的验收标准是这样的:

• 用户在任何选项卡中登录网站后，如果他们在新选项卡中导航到该网站，则他们必须已经登录
• 当用户退出任何选项卡时，他们必须立即退出所有选项卡
• 用户可以刷新页面并保持登录状态
• 关闭所有选项卡后，用户将注销并且必须重新登录
• 我无权更改服务器代码(因此必须在客户端上完成)

我找到了这个 Question/Answer这真的很有帮助

在查看这个时我不得不排除 cookie，因为在向服务器选项卡 A 发出请求之外将不知道选项卡 B 已经更改了 cookie

所以我从上面的问题中得到了部分答案并开始使用本地存储并添加了一个事件来检查“登录”状态是否发生了变化，这允许我在一个选项卡中注销并立即登录在不使用 setInterval 连续检查的情况下换一个!耶

但是如果您打开一个新标签并导航到您仍然登录的网站，我仍然会遇到所有标签关闭后的问题。

我尝试了一些可能的解决方案，例如设置一个打开 session 的选项卡计数器，在选项卡关闭/打开时递减和递增(使用 window.onbeforeunload)。问题:当只有一个选项卡处于事件状态时刷新站点会使您注销。我能想到的所有东西都有一个不起作用的边缘案例。

Answer 1

本地存储 + session 存储!

我会将登录的值存储在本地存储和 session 存储中，当加载窗口(新选项卡或现有选项卡的刷新)时，它会检查本地存储的“已记录” -in'值，如果不存在，它将检查 session 存储!

基本上，我使用 session 存储来处理页面刷新，使用本地存储来处理多个选项卡。每次卸载(关闭或刷新)窗口/选项卡时，我都会删除本地存储“已登录”，当我返回页面时，如果它在 session 存储中但不在本地存储中，我将其放回来自 session 存储的本地存储并继续作为经过身份验证的用户

代码如下:

登录时:

localStorage.setItem('logged-in', true);
sessionStorage.setItem('logged-in', true);

在我的基础组件中:

window.onbeforeunload = (event) => {
    localStorage.removeItem('logged-in');
}

let loggedIn = localStorage.getItem('logged-in');
let sessionLoggedIn = sessionStorage.getItem('logged-in');
if(!loggedIn) {
    if(sessionLoggedIn) {
        localStorage.setItem('logged-in', JSON.parse(sessionLoggedIn));
        //go to authenticated space
        window.location.href = '/authenticated';
    } else {
        //go to login
        window.location.href = '/login';
    }
} else {
    //go to authenticated space
    window.location.href = '/authenticated';
}

window.addEventListener('storage', (event) => {
    if (event.key == 'logout' && event.newValue) { 
        sessionStorage.removeItem('logged-in');
        localStorage.removeItem('logout');
        window.location.href = '/login';
    }
});

退出时

localStorage.setItem('logout', true)

如果您发现自己处于类似情况，希望这对您有所帮助