GitHub如何檢測登錄/註銷？

當在GitHub網站上打開多個標籤頁/窗口時，如果您碰巧登錄/註銷其中一個標籤，您會收到所有其他消息的通知，邀請您重新加載以刷新會話狀態。GitHub如何檢測登錄/註銷？

這是怎麼做的？

我所知道的，到目前爲止是HTML代碼中包含有通過JavaScript激活一些隱藏的SVG圖形+跨頁：

<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>

來源

2016-09-17 Bernard Rosset

也許他們反覆檢查一個cookie。或者註銷標籤向其他人註銷註銷信息。或者是其他東西。 – Bergi

通過https：//live.github.com/_sockets /上的websocket ... – immobiluser

這與storageEvents完成。

基本上，Storage接口在其影響的全局對象上發出storage event。

本質上，在每個生成的GitHub頁面加載時，GitHub設置名稱爲'user-login'的元標記。該值將是當前登錄的用戶。

例如，如果我查看我在GitHub上裝入的網頁的源代碼，源代碼包含此行：

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

然後，每次加載頁面時，內容的值被檢索並存儲在LocalStorage中。粗略地說，使用jQuery的代碼是：

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值很容易）區分

來源

2018-01-17 11:10:19 timgws

GitHub如何檢測登錄/註銷？

回答

相關問題