GitHubはどのようにサインイン/アウトを検出しますか？

Question

GitHub Webサイトでいくつかのタブ/ウィンドウを開くと、これらのいずれかでサインイン/アウトすると、セッション状態を更新するためにリロードするように促す通知が表示されます。

どうしたのですか？

私がこれまで知っているすべては、ページの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> 

Answer 1

これはstorageEventsで行われます。

基本的に、Storageインターフェイスは、影響を受けるグローバルオブジェクト上でstorage eventを発行します。

基本的に、生成された各GitHubページの読み込み時に、GitHubはメタタグを名前「user-login」に設定します。値は現在ログインしているユーザーになります。コンテンツの値が取得され、ページが読み込まれ、その後、各時間を

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

：私はGitHubの中にロードされているページのソースコードを表示する場合

例えば

は、ソースコードは、この行が含まれています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'); 
    } 
}); 

あなたはおそらく彼らが繰り返しクッキーをチェック