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

Question

我的基于AngularJS的应用程序旨在使用localStorage来保存身份验证后从后端返回的JWT身份验证令牌.对于进入后端的每个请求(POST,GET等),应用程序使用拦截器将令牌搭载到后端.这个过程一直运行良好,直到我遇到以下问题:

1. 我的经理不允许使用localStorage保存用户名和JWT身份验证令牌,因为除非他/她故意退出应用程序(从localStorage清除缓存),否则它们将保留在浏览器中.如果用户在未注销的情况下关闭浏览器,则缓存将保留在localStorage中.

2. 因为问题1,我转而使用sessionStorage来存储用户名和JWT身份验证令牌,但是,当用户右键单击某些链接以在新选项卡或新浏览器窗口中打开应用程序时,这会导致更多问题.在新的选项卡/窗口中,应用程序无法看到用户已经过身份验证,并且发送到后端的请求被拒绝(401 error),因为应用程序无法在新选项卡/窗口中的sessionStorage中找到JWT身份验证令牌.

3. 如果我将用户名和JWT身份验证令牌缓存为JavaScript代码中的变量,那么如果用户刷新浏览器,应用程序将丢失它们.

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

Answer 1

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

通常，当用户在新窗口/选项卡中打开链接时，会启动一个全新的会话。URL 将指向需要身份验证的内容，并且由于它是新会话，角度应用程序应尝试恢复它。用户要么已在启用“记住我”的情况下登录，要么系统将提示他们输入用户名/密码。成功验证用户身份后，应通过重定向恢复 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没有会话相同。因为当浏览器重新启动时令牌将被恢复。那有什么安全感呢？