Angular 中的身份验证：处理新选项卡或新浏览器窗口答案

【问题标题】：Authentication in Angular: handling new tab or new browser windowAngular 中的身份验证：处理新选项卡或新浏览器窗口
【发布时间】：2015-12-23 08:59:31
【问题描述】：

我的基于 AngularJS 的应用程序旨在使用 localStorage 来保存身份验证后从后端返回的 JWT 身份验证令牌。对于发往后端的每个请求（POST、GET 等），应用程序使用拦截器将令牌捎带到后端。这个过程一直运行良好，直到我遇到以下问题：

我的经理不允许使用 localStorage 保存用户名和 JWT 身份验证令牌，因为除非他/她有意退出应用程序（这会从 localStorage 清除缓存），否则它们将保留在浏览器中。如果用户在没有注销的情况下关闭浏览器，缓存将保留在localStorage中。
由于问题 1，我改用 sessionStorage 来存储用户名和 JWT 身份验证令牌，但是，当用户右键单击某些链接以在新选项卡中打开应用程序时，这会导致进一步的问题或新的浏览器窗口。在新选项卡/窗口中，应用程序无法看到用户已通过身份验证，并且前往后端的请求被拒绝 (401 error)，因为应用程序无法在新选项卡/窗口的 sessionStorage 中找到 JWT 身份验证令牌。
如果我将用户名和 JWT 身份验证令牌作为变量缓存在 JavaScript 代码中，如果用户刷新浏览器，应用程序将丢失它们。

所以这些是我在 Angular 中使用 JWT 身份验证令牌时的困境。是否有更好的解决方案来处理这些要求：不使用 localStorage 并且应用程序应在新选项卡或新浏览器窗口中继续使用相同的 auth JWT 令牌。谢谢！

【问题讨论】：

在stormpath.com/blog/…有一个屠夫
我也有同样的问题。 @TonyGW 你找到好的解决方案了吗？
哇，还是没有答案。奇怪的是，这个问题只有 3 票赞成和 1 票最喜欢！

标签： javascript angularjs authentication jwt

【解决方案1】：

这更多是您的角度/服务器设置中的设计缺陷，而不是简单的令牌问题。

通常，当用户在新窗口/选项卡中打开一个链接时，会启动一个全新的会话。该 URL 将指向需要身份验证的内容，并且由于它是一个新会话，因此 Angular 应用程序应该尝试恢复它。用户登录时启用了记住我，否则系统将提示他们输入用户名/密码。成功验证用户身份后，应使用重定向恢复 URL。

所以它的工作原理是这样的。

http://example.com/page1 <-- user uses ctrl+click to open new tab
http://example.com/page2 <-- user doesn't have session
http://example.com/signin?url=/page2 <-- redirect to sign in with return path
http://example.com/page2 <-- user session restored after sign in

如果用户启用了记住我功能，则可以跳过登录步骤。

将会话令牌存储在localStorage 中与没有会话相同。由于重新启动浏览器时将恢复令牌。这有什么安全性？

【讨论】：

所以你建议继续使用localStorage？这就是我一直在想的，但是经理不喜欢这种坚持。
@TonyGW 不，我是说不将令牌放入 localStorage。

【解决方案2】：

您是否尝试在您的域的 cookie 中设置 JWT。这样，如果设置了 cookie，它将包含在您从应用程序触发的每个 GET/POST 请求中，并将解决您的新标签页或新浏览器窗口问题。

【讨论】：