Question

所以我最近对我正在建设的网站有了接受标准：

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

我发现这个Question/Answer非常有帮助

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

所以我从上面的问题中得到了部分答案并开始使用本地存储并添加了一个事件来检查“登录”状态是否已更改，这允许我在一个选项卡中注销并立即登录在另一个没有使用setInterval连续检查！是的

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

我尝试了一些可能的解决方案，比如在标签关闭/打开时使用会话打开，减量和增量的选项卡计数器（使用window.onbeforeunload）。问题：当只有一个选项卡处于活动状态时刷新站点会将您注销。我能想到的一切都有一个不起作用的优势。

Answer 1

本地存储+会话存储！

我会将登录的值存储在本地存储和会话存储中，当加载窗口时（新选项卡或刷新现有选项卡）它将检查本地存储的＆＃ 39;登录＆＃39;价值，如果它不存在，它会检查会话存储！

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

以下是此代码：

登录时：

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)

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

多个选项卡相同的会话，当所有选项卡都消失时清除会话

1 个答案: