登录后的Angular JWT和用户信息存储

Posted

技术标签:

【中文标题】登录后的Angular JWT和用户信息存储【英文标题】:Angular JWT and user info storage after login 【发布时间】:2015-03-01 04:44:38 【问题描述】:

成功登录后将除 JWT 之外的任何其他用户信息保存在 localstorage 或 cookie 中的最佳做法是什么? (用户配置文件对象已在 jwt 有效负载子部分中保存和加密。)我需要准备好用户配置文件对象,然后再以角度初始化任何其他内容(用于获取用户角色、登录状态等)。

如果我只在客户端保存 JWT,我需要一个额外的 ajax 请求才能在应用程序加载之前从服务器端的 JWT 解码中获取用户信息,因为令牌密钥在服务器上(仅在整页刷新之后)。令牌有效或无效,因此在这种情况下处理错误要容易得多。

如果我将 JWT 和用户配置文件对象作为字符串保存在客户端的存储中,那么这是多余的,用户可以手动更改该对象,并且应用程序可以关闭。

我更喜欢在成功登录后仅将 JWT 保存在客户端的存储中,但我需要一些建议,在这种情况下如何组织代码?整页刷新后如何获取用户配置文件对象?

请帮忙。

【问题讨论】:

JWT 允许您在令牌的标头和有效负载中都有声明。除此之外,JWT 允许您在对标头进行签名时对有效负载进行加密。这样,您可以将客户端应用程序(此处为浏览器中的角度)可以读取的信息放入令牌中,同时将其他一些信息保密且仅对服务器可用。 【参考方案1】:

最安全的解决方案是将 JWT 存储在 HTTPS-Only cookie 中,然后向服务器发出请求以获取用户对象。

如果您想避免对服务器的额外调用,您需要发挥创意。我正在尝试的一种方法是将 JWT 的声明正文存储在客户端上 - 只是正文,不包括签名。排除签名后,“令牌”不再是 JWT,不能用于身份验证,从而防止实际访问令牌从本地存储中被盗。

但是,这确实假设声明主体有两件事:

1) 信息不透明且不包含有关用户的个人身份信息 (PII)(本地存储易受 XSS 攻击)。

2) 如果此对象在本地存储中被修改,您的 Angular 应用程序不会向用户泄露敏感信息(您不应该在 Angular 应用程序中存储敏感信息,它应该受 API 保护)

3) 与所有基于 cookie 的身份验证策略一样,您可以保护自己免受 CSRF Attacks 的侵害

我在 Stormpath 工作,最近我就这个主题写了一篇博文:Token Based Authentication for Single Page Apps。

希望这会有所帮助!

【讨论】:

【参考方案2】:

为了简单起见,我将只存储 JWT 并实现一个额外的 ajax 调用来获取用户配置文件。

但如果您绝对想避免这一调用,您可以考虑使用非对称签名的 JWT 而不是加密的 JWT,然后在客户端提取数据,假设您控制 JWT 的创建。

【讨论】:

以上是关于登录后的Angular JWT和用户信息存储的主要内容,如果未能解决你的问题,请参考以下文章

Angular - 存储永久用户信息的位置(本地存储除外)

用户无法使用 JWT 和 Node API 登录 Angular js

基于jwt的用户登录认证

使用 Angular 和 JWT 令牌持续登录

如何设置用户登录后的欢迎信息?

Angular 2 和 JWT 身份验证 (Auth0)