多个标签相同的会话，当所有标签都消失时清除会话

Question

所以我最近对我正在建造的一个网站制定了验收标准：

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

我发现这个Question/Answer 真的很有帮助

查看此内容时，我必须排除 cookie，因为除了向服务器发出请求之外，选项卡 A 不会知道选项卡 B 已更改 cookie

所以我从上面的问题中提取了部分答案并开始使用本地存储并添加了一个事件来检查“登录”状态是否已更改，这允许我在一个选项卡中注销并立即登录out in another 不使用 setInterval 不断检查！耶

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

我尝试了一些可能的解决方案，例如设置一个打开会话的选项卡计数器，在选项卡关闭/打开时减少和增加（使用 window.onbeforeunload）。问题：只有一个选项卡处于活动状态时刷新站点会使您注销。我能想到的所有东西都有一个不起作用的极端情况。

Answer 1

本地存储 + 会话存储！

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

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

下面是代码：

登录时：

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)

希望这对你们中的一些人有所帮助，如果你发现自己处于类似的情况