Github跨tabs/windows检测用户登录状态

访问 Github 网站时，如果多个 Window 或 Tab 同时访问 github.com，在任何一个页面做登录或登出处理，其他页面会立即提示用户已经登录或登出，需要重新加载页面。

[b]（1）操作演示[/b]
同时2个窗口打开github.com
[img]http://dl2.iteye.com/upload/attachment/0125/4646/270ad599-3d6a-347e-909c-94fcdd53fcda.png[/img]

在其中一个窗口登录用户
[img]http://dl2.iteye.com/upload/attachment/0125/4648/8e7edd1c-82ad-3689-be59-45e6412aea42.png[/img]

另外一个窗口显示需要Reload
[img]http://dl2.iteye.com/upload/attachment/0125/4650/e681f557-750a-3f14-b7f4-320875ce7571.png[/img]

刷新窗口后
[img]http://dl2.iteye.com/upload/attachment/0125/4652/cc8a05c4-5f88-3fb2-b53b-fdcff5956c05.png[/img]

在一个窗口做登出处理，另外一个窗口也会提示需要Reload
[img]http://dl2.iteye.com/upload/attachment/0125/4654/a4ccbc2d-eb42-3ac8-b027-69f51210ca65.png[/img]

[b]（2）代码分析[/b]
浏览器右键查看源代码可以看到以下代码，其中"d-none"就是控制是否显示div的。

  <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 fill-rule="evenodd" 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"/></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>

[img]http://dl2.iteye.com/upload/attachment/0125/4656/00ea2d0c-95af-3cbc-adab-635e4a2960b1.png[/img]

查看源代码可以看到页面总共引入了2个JavaScript文件：

<script crossorigin="anonymous" integrity="sha256-LrSxxxxx" src="https://assets-cdn.github.com/assets/frameworks-2ebxxxxx.js"></script>
<script async="async" crossorigin="anonymous" integrity="sha256-izZxxxxx" src="https://assets-cdn.github.com/assets/github-8b3xxxxx.js"></script>

继续查看第二JavaScript文件并搜索"js-stale-session-flash"，可以找到以下代码，可见是通过监听Storage数据变更StorageEvent事件后是否存在logged-in来判断的！

window.addEventListener("storage",function(e){if(e.storageArea===localStorage&&"logged-in"===e.key&&e.newValue!==a){a=e.newValue;var n=document.querySelector(".js-stale-session-flash");r["default"](n instanceof HTMLElement,"Flash element must exist and be an HTMLElement"),n.classList.toggle("is-signed-in","true"===a),n.classList.toggle("is-signed-out","false"===a),n.classList.remove("d-none"),

[img]http://dl2.iteye.com/upload/attachment/0125/4658/ee5dc309-6847-384a-8f9a-cbe5a09bb2c2.png[/img]

继续在第二JavaScript文件里搜索"logged-in"，可以看到以下代码，可见根据head里<meta name="user-login" content="">的content的值来判断的，有值时为true。有值的情况下是：[b]<meta name="user-login" content="rensanning">[/b]

!function(){var e=document.querySelector("meta[name=user-login]");if(e instanceof HTMLMetaElement){var n=e.content,a=String(!!n.length);try{localStorage.setItem("logged-in",a)}catch(i){return}

[img]http://dl2.iteye.com/upload/attachment/0125/4660/0e764082-e84a-3b0d-93e7-a5be46be77da.png[/img]

[color=blue][b]总结一下：监听LocalStorage的StorageEvent事件！[/b][/color]

StackOverflow上也有相关的问题：[url=https://stackoverflow.com/questions/39550656/how-does-github-detect-signing-in-out]https://stackoverflow.com/questions/39550656/how-does-github-detect-signing-in-out[/url]