GitHub如何检测登录/退出？

Question

打开GitHub网站的多个标签/窗口，如果您在其中一个上登录/注销，则会在所有其他标签上收到通知，邀请您重新加载以刷新会话状态。 这是怎么做到的？ 目前我知道的是页面HTML代码包含一些隐藏的SVG图形+跨度，通过JavaScript激活：

<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
  <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"></path></svg>
  <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
  <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>

- Bernard Rosset

---

也许他们会反复检查一个 cookie。或者注销选项卡会向其他人发送注销消息。或者是其他什么。 - Bergi

通过https://live.github.com/_sockets/...上的websocket。 - immobiluser

Answer 1

这是使用 Storage 事件完成的。

基本上，Storage 接口会在受其影响的全局对象上触发 storage 事件。

实际上，在每次生成 GitHub 页面时，GitHub 都会设置一个名为 'user-login' 的元标记。该值将是当前已登录用户。

例如，如果我查看在 GitHub 中加载的页面的源代码，则源代码包含此行：

<meta name="user-login" content="timgws">

然后，每次页面加载时，会检索内容的值，并将其存储在 LocalStorage 中。使用 jQuery 大致如下:

那么，每当页面加载时，都会使用 jQuery 检索内容的值，并将其存储在 LocalStorage 中。

localStorage.setItem("logged-in", $("meta[name='user-login']").attr("content"));

最后一个魔术技巧是监听storage事件，如果用户名已更改，则切换flash类的可见性。

var currentUser = localStorage.getItem("logged-in");
window.addEventListener("storage", function (event) {
    if (event.storageArea === localStorage && event.key === "logged-in"
        && event.newValue !== currentUser) {

        $('.flash').removeClass('d-none');
    }
});

你可能希望添加一些代码来区分用户的登录和退出（这应该很容易，只需比较currentUser的值即可）

- Tim Groeneveld