Javascript GitHub如何检测登录/注销?
在GitHub网站上打开多个选项卡/窗口时,如果您碰巧登录/注销其中一个选项卡/窗口,则会收到所有其他选项卡/窗口的通知,提示您重新加载以刷新会话状态 这是怎么做到的 到目前为止,我只知道页面HTML代码包含一些隐藏的SVG图形+跨距,这些跨距通过JavaScript激活:Javascript GitHub如何检测登录/注销?,javascript,github,Javascript,Github,在GitHub网站上打开多个选项卡/窗口时,如果您碰巧登录/注销其中一个选项卡/窗口,则会收到所有其他选项卡/窗口的通知,提示您重新加载以刷新会话状态 这是怎么做到的 到目前为止,我只知道页面HTML代码包含一些隐藏的SVG图形+跨距,这些跨距通过JavaScript激活: <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none"> <svg ar
<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>
您已使用其他选项卡或窗口登录。刷新会话。
您已在其他选项卡或窗口中注销。刷新会话。
这是通过storageEvents完成的
基本上,存储
接口在其影响的全局对象上发出
基本上,在每个生成的GitHub页面加载上,GitHub都会设置名为“user login
”的meta标记。该值将是当前登录的用户
例如,如果我查看在GitHub中加载的页面的源代码,则源代码包含以下行:
<meta name="user-login" content="timgws">
最后,最后一个魔术是监听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
的值应该很容易)也许他们会重复检查cookie。或者“注销”选项卡向其他人发送注销消息。或者别的什么。打开websocket。。。
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');
}
});