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

功能描述:在浏览器退出时(所有tab关闭时)退出登录

需求来源:支持类似传统网页登录时的remember me选项

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

要点:如何检测tab关闭,如何检测所有tab关闭

如何退出登录

调用Meteor.logout()

如何检测tab关闭

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

$(window).on('beforeunload', function () {
   Meteor.logout();
});

如何检测所有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);
    });

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

  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();
        }
    });

擦屁股

有了上述代码,应用应该具有我们预期的功能:当浏览器关闭时,或所有该应用的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();
        }
    });

Summary

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

相关代码如下:

    /**
     * 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();
        }
    });

 

posted @ 2016-01-05 23:41  我不是照耀  阅读(1131)  评论(0编辑  收藏  举报