标签：
功能描述：在浏览器退出时（所有tab关闭时）退出登录
需求来源：支持类似传统网页登录时的remember me选项
背景：Meteor应用中，用户登录后，会在浏览器的localStorage保存resume token， 所以下次再使用该浏览器打开同一meteor应用时，会自动登录。有时，我们希望应用支持在浏览器退出时（所有tab关闭时）即退出登录，然而meteor被没有对这项功能的原生支持，需要我们自己实现。
要点：如何检测tab关闭，如何检测所有tab关闭
调用Meteor.logout()
我们希望tab关闭时退出登录，那么我们得有方法检测tab关闭。我们可以向浏览器beforeunload事件注册监听。例如：
$(window).on(‘beforeunload‘, function () { Meteor.logout();
});
依据meteor的登录机制，在如何用户在同一浏览器打开多个tab，那么他们的登录情况是相同的。如果仅依靠上述代码，那么任意tab关闭时，将导致用户退出登录。我们希望的逻辑是，浏览器关闭，或者所有该应用的tab关闭时，才退出登录。
或许有更好的解决方案，这里仅介绍一下我的一种解决方案：利用浏览器的localStorage，记录当前应用打开的tab数目，当关闭tab
$(window).on(‘load‘, function () { let count = Meteor._localStorage.getItem(openTabCountKey); count = count ? Number(count) + 1 : 1; Meteor._localStorage.setItem(openTabCountKey, count); }); $(window).on(‘beforeunload‘, function () { Meteor._localStorage.setItem(openTabCountKey, Number(Meteor._localStorage.getItem(openTabCountKey)) - 1); });
这里有几个小的细节需要注意：
在记录了tab打开数量之后，我们可以修正一下上述代码：
$(window).on(‘beforeunload‘, function () { let count = Number(Meteor._localStorage.getItem(openTabCountKey));if (!(count > 0)) { Meteor.logout(); } });
有了上述代码，应用应该具有我们预期的功能：当浏览器关闭时，或所有该应用的tab关闭时，退出登录。
而然，聪明的你可能会发现，再次打开该应用时，控制台显示一段报错提示：……（大意是你被服务端强制退出登录）
如果你查看一下Meteor.logout源码，应该可以知道原因：该方法先调用了服务端方法，在服务端清除相关resume token，然后客户端在回调中再清除本地保存的resume token。
而然，虽然服务端清除了resume token，但我们没有等到客户端响应就关闭了tab（关闭了应用），所以没办法在回调中执行客户端相关的清理工作。因此，我们需要显示地、同步地执行客户端清理工作。修正后的代码如下：
$(window).on(‘beforeunload‘, function () { let count = Number(Meteor._localStorage.getItem(openTabCountKey));if (!(count > 0) && shouldLogout) { Meteor.logout(); Accounts.makeClientLoggedOut(); } });
添加一些方法，以支持设置与取消该特性。
相关代码如下：
/** * logout when all tabs are closed * @param {Boolean} setIt - default true */ logoutOnClose(setIt = true) { if (setIt) { Meteor._localStorage.setItem(oncloseLogoutKey, true); } else { Meteor._localStorage.removeItem(oncloseLogoutKey); } }
willLogoutOnClose() { return Boolean(Meteor._localStorage.getItem(oncloseLogoutKey)) }
$(window).on(‘load‘, function () { let count = Meteor._localStorage.getItem(openTabCountKey); count = count ? Number(count) + 1 : 1; Meteor._localStorage.setItem(openTabCountKey, count); }); $(window).on(‘beforeunload‘, function () { Meteor._localStorage.setItem(openTabCountKey, Number(Meteor._localStorage.getItem(openTabCountKey)) - 1); });
$(window).on(‘beforeunload‘, function () { let count = Number(Meteor._localStorage.getItem(openTabCountKey)); let shouldLogout = Boolean(Meteor._localStorage.getItem(oncloseLogoutKey)); if (!(count > 0) && shouldLogout) { Meteor.logout(); Accounts.makeClientLoggedOut(); } });
标签：
原文地址：http://www.cnblogs.com/zhaoyao91/p/5104144.html
