防止重复的窗口/选项卡

Question

我已经为我的网站设置了电子邮件验证。

用户注册后，系统会提示他们通过已通过电子邮件发送给他们的链接验证其帐户。如果用户点击该链接，它会激活他们的帐户并将他们带到一个登录屏幕，但当然是在一个新标签页中。

也许我是强迫症，但我的问题是，如果有人在注册后立即验证他们的帐户而不关闭第一个选项卡，他们将在单击验证链接后在登录屏幕上打开两个选项卡。 如果已打开具有相同域的选项卡，是否有任何方法可以防止这种情况或使用相同的选项卡？还是有更好的架构可以使用？

我已经设置了验证过程，以便在我的数据库中有两个单独的表。

users_unverified（表A）

account_email | account_password | token | entry_time | num_id (primary)

users_verified（表B）

account_email | account_password | joined | ...

这个过程可以这样分解：

1. 用户使用电子邮件和密码注册，从而创建令牌
2. 令牌通过验证链接通过电子邮件发送给他们
3. 一旦用户通过链接注册（如果令牌匹配且未过期），account_email 和account_password 将从users_unverified 转移到users_verified 并显示确认消息
4. users_unverified中的记录被删除

是否有不同的或更好的方法来做到这一点，这可以让我避免同时打开两个标签的可能性？

Answer 1

一般来说，我认为您不必担心，用户会明白单击电子邮件中的链接会打开浏览器选项卡，然后他们会完成该过程。

如果您确实想这样做，您可以使用localStorage 设置窗口已打开的状态，并使用BroadcastChannel 在选项卡之间发送数据（例如将哈希发送回您的窗口，以便您可以显示要求验证其电子邮件或进行重定向的 DOM）

这是一个例子：

此 javascript 将在注册页面上：

<script type="text/javascript">
    var channel = new BroadcastChannel("linkopened");
    channel.onmessage = function(e) {
        // do something with data sent from other tab
        alert('Email link opened, show DOM or redirect: ' + e.data)
    };

    localStorage.setItem('pageopen', true);
    window.onbeforeunload = function() {
        localStorage.removeItem('pageopen');
    };
</script>

这将在新标签页中打开的页面上：

<script type="text/javascript">
    if (localStorage.getItem('pageopen')) {
        var channel = new BroadcastChannel("linkopened");
        channel.postMessage('Some special link or hash');
        window.close();
    }
</script>