html - 将特定于选项卡的数据绑定(bind)到 HTTP GET 请求

我正在尝试实现一种身份验证机制，其中每个浏览器选项卡都可以以不同的用户身份登录。

下面是这个系统的规则:

身份验证 token 指示登录的用户。

有两种身份验证 token :私有(private)和公共(public)。

每个私有(private) token 绑定(bind)到单个选项卡并确定其帐户信息。

公共(public) token 可以由任何选项卡读取/写入，并指示最后登录的帐户(跨所有选项卡)。

当用户在任何选项卡中注销时，私有(private)和公共(public) token 都会被删除。

每次选项卡点击需要身份验证的页面时，系统都会尝试读取私有(private) token 。如果未设置(如新/空白选项卡的情况)，它会尝试将公共(public) token 的值复制到私有(private) token 中。如果未设置公共(public) token ，则用户将被重定向到身份验证屏幕。

当已登录选项卡并用户单击链接时，请求必须在自定义HTTP header 中包含私有(private) token 。出于安全原因，在 URI 中发送此信息不是一种选择。

能够像使用普通链接一样使用后退/前进按钮进行导航(也就是说，不会提示重新提交表单数据)。

到目前为止我尝试过的:

使用 cookies对于私有(private)和公共(public) token :这不起作用，因为服务器无法知道要查看哪个 cookie。如果用户单击选项卡内的链接，则请求会跨所有选项卡和服务器发送所有 cookie无法知道哪个人点击了链接。

将私有(private)代币存储在 sessionStorage :这不起作用，因为当用户单击链接时，无法指定应与 HTTP GET 请求一起发送的自定义 header 。

使用 AJAX 请求页面，然后使用数据 URI 导航到内存中的页面:出于安全原因，Internet Explorer 不允许对 HTML 内容使用数据 URI。见 http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx

使用 <form method="get" enctype="multipart/form-data">并使用隐藏字段传递 token : enctype="multipart/form-data"仅支持 POST。

使用 <form method="post" enctype="multipart/form-data">并使用隐藏字段传递 token :理论上，这应该可行，但现在如果用户使用后退/前进按钮，则会提示用户重新提交表单数据。

使用 AJAX 请求页面，然后使用 document.open(); document.write(); document.close() 重写当前页面.我都试过了 https://stackoverflow.com/a/4404659/14731和 http://forums.mozillazine.org/viewtopic.php?p=5767285&sid=d6a5a2e8e311598cdbad124e277e0f52#p5767285在这两种情况下，新 <head> 中的脚本块永远不会被执行。

有任何想法吗？

最佳答案

好的，在经历了许多不同的迭代之后，这是我们最终得到的实现:

变量

有两种数据存储:

IndexedDB ，在所有选项卡之间共享。

sessionStorage每个标签是唯一的。

我们存储以下变量:

IndexedDB 包含 publicToken , nextTabId .

sessionStorage 包含 privateToken , tabId .

公有 token ，私有(private) token

见 https://stackoverflow.com/a/1592572/14731用于定义身份验证 token 。

有两种身份验证 token :公共(public) token 和私有(private) token 。

publicToken是上次登录操作返回的 token ，跨所有选项卡。

privateToken是当前标签页上次登录操作返回的token。

标签ID

每个选项卡都由一个名为 tabId 的 token 唯一标识。 .

nextTabId是一个可跨所有选项卡访问的数字。

如果一个选项卡没有 id，它会根据 nextTabId 创建一个新的并增加其值。

例如，tabId可能具有“com.company.Tab X”的值，其中 X是 nextTabId 返回的数字.

每次一个标签登录，privateToken和 publicToken使用服务器返回的身份验证 token 覆盖。

当用户退出时，我们删除 privateToken和 publicToken在浏览器端，和 privateToken在服务器端。我们不删除publicToken在服务器端。

这意味着只要一个选项卡退出，所有的选项卡都共享相同的 privateToken也会被注销。使用不同 token 的任何选项卡都不会受到影响。

何时多个选项卡共享相同的 privateToken ?当您在新窗口或选项卡中打开链接时，它会继承 privateToken父选项卡。

如果我们要删除 publicToken在服务器上，使用 privateToken 退出的选项卡X, publicToken Y 会导致带有 privateToken 的制表符Y 退出(这是不可取的)。

在页面加载时

扫描页面以获取 HTML 链接。

对于每个链接，附加一个 tabId URL 的查询参数。参数值等于tabId的值.

剥离 tabId来自当前页面的 URL 参数使用 history.replaceState()所以用户可以与他们的 friend 分享链接(tabId 是特定于用户的，不能分享)。

删除 tabId cookie(更多内容见下文)。

单击链接时

该选项卡创建一个 tabId cookie 并点击链接。

cookie 的名称等于值 tabId并且值等于 privateToken 的值

当服务器收到请求时

如果tabId缺少参数，则将浏览器重定向到 GetTabId.html?referer=X哪里X是当前的 URL。

如 tabId存在但身份验证 token 无效或已过期，然后将浏览器重定向到登录屏幕。

获取TabId.html

如果选项卡没有 privateToken , 复制 publicToken进入 privateToken .

如果两者都privateToken和 publicToken未定义，重定向到登录页面。

该页面采用名为 referer 的 URL 参数。这表明成功时重定向到的位置。

如果选项卡有 privateToken , 附加 tabId referer 的参数页面并重定向回它。

使用 window.location.replace()重定向时删除 GetTabId.html从浏览器历史记录。

为什么我们不断删除/添加 cookie？

我们尽量减少每次请求时发送到服务器的 cookie 数量。

如果我们没有删除 tabId cookie 在页面加载时，那么每次选项卡发出请求时，所有其他选项卡的 cookie 也会被发送。

已知的问题

“查看源代码”打开缺少的 URL tabId .结果，它获取重定向到 GetTabId.html 的页面的源代码。而不是实际页面。

长页面重新加载(客户端重定向到 GetTabId.html 并返回原始页面)。

为冗长的实现细节道歉，但我找不到更简单/更短的解决方案。

关于html - 将特定于选项卡的数据绑定(bind)到 HTTP GET 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26556749/

html - 将特定于选项卡的数据绑定(bind)到 HTTP GET 请求

上一篇：html - 是否可以在没有包装器的情况下任意向左或向右堆叠无限的 div？

下一篇：javascript onclick 在 jsfiddle 中不起作用