Meteor：关闭所有tab时退出登录

功能描述：在浏览器退出时（所有tab关闭时）退出登录

需求来源：支持类似传统网页登录时的remember me http://www.shswbz.com/选项

背景：Meteor应用中，用户登录后，会在浏览器的localStorage保存resume token， 所以下次再使用该浏览器打开同一meteor应用时，会自动登录。有时，我们希望应用支持在浏览器退出时（所有tab关闭时）即退出登录，然而meteor被没有对这项功能的原生支持，需要我们自己实现。

要点：如何检测tab关闭，如何检测所有tab关闭

如何退出登录

调用Meteor.logout()

如何检测tab关闭

我们希望tab关闭时退出登录，那么我们得有方法检测tab关闭。我们可以向浏览器beforeunload事件注册监听。例如：

$(window).on('beforeunload', function () {   Meteor.logout();
});//http://www.shswbz.com/

如何检测所有tab关闭

依据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);    });//www.shswbz.com

这里有几个小的细节需要注意：

1. 使用Meteor._localStorage而不是window.localStorage以获得更好的兼容性
2. localStorage存储的全是字符串，所以我们要进行格式转换
3. 声明一个常量openTabCountKey
4. 该操作并发量非常小，暂且忽略了状态同步问题

在记录了tab打开数量之后，我们可以修正一下上述代码：

    $(window).on('beforeunload', function () {        let count = Number(Meteor._localStorage.getItem(openTabCountKey));if (!(count > 0)) {            Meteor.logout();        }    });//shswbz.com

擦屁股

有了上述代码，应用应该具有我们预期的功能：当浏览器关闭时，或所有该应用的tab关闭时，退出登录。

而然，聪明的你可能会发现，再次打开该应用时，控制台显示一段报错提示：……（大意是你被服务端强制退出登录）

如果你查看一下Meteor.logout源码，应该可以知道原因：该方法先调用了服务端方法，在服务端清除相关resume token，然后客户端在回调中再清除本地保存的resume token www.shswbz.com。

而然，虽然服务端清除了resume token，但我们没有等到客户端响应就关闭了tab（关闭了应用），所以没办法在回调中执行客户端相关的清理工作。因此，我们需要显示地、同步地执行客户端清理工作。修正后的代码如下：

    $(window).on('beforeunload', function () {        let count = Number(Meteor._localStorage.getItem(openTabCountKey));if (!(count > 0) && shouldLogout) {            Meteor.logout();            Accounts.makeClientLoggedOut();        }    });www.shswbz.com

Summary

添加一些方法，以支持设置与取消该特性。

相关代码如下：

    /*

     * http://www.shswbz.com/     * 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);    });//www.shswbz.com    $(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.shswbz.com/