React（or angular）+ JWT Authentication + Session/Cookies

Question

我的应用程序服务器使用JWT身份验证，我的前端是React（但对于此问题，也可能是Angular）。

用户首次登录时，应用程序交换用户提供的用户名+密码并获取JWT令牌，以向应用程序服务器发出内部API请求。

从用户体验来看，我真的很喜欢用户每次去“myapp.com”时都不必输入用户名和密码。但是这提出了另一个问题。为了安全起见，JWT密钥通常是短暂的，并且在密钥的“使用期限”结束并且不允许更新时，必须使用旧的JWT（一段时间）或用新的用户名+密码进行续约。

这种情况下常见的做法是保持无忧的UX？让JWT密钥非自然地长久存在，并仅仅使用cookie保留JWT令牌或实际上在cookie中保留用户名+密码？如果是这样，我会非常惊讶。

对用户的IP地址编码JWT是否有意义，并赋予它无限期的生命？因此，如果其他人（或用户自己）使用不同的位置，他/她将不得不重新输入密码并获得该位置的无限期密钥？

Answer 1

我们遵循的模式是，我们通常将令牌过期设置为用户身份令牌的一天。而像访问令牌3-4小时的东西。

当用户登录时，我们使用他的凭据获取身份令牌并将其存储在localStorage中。然后，我们使用我们拥有的身份令牌来触发另一个请求，以获取Web应用程序的客户端访问令牌，并将客户端访问令牌保存在sessionStorage中。

对于所有后续请求，我们从会话存储中提取它并将其与请求一起发送。

当用户关闭选项卡（会话）时，访问令牌丢失，并且在下一次使用身份令牌再次打开时重新获得该令牌。

因此，他必须在一天内登录一次。

如果您更关心有人从存储中窃取令牌，则可以使用AES对令牌进行加密和解密。

希望这会有所帮助。