Angular 基于令牌的身份验证，获取并存储用户配置文件，最佳实践

Question

我几个月前开始为 Angular 项目构建我的第一个基于令牌的身份验证，现在我需要升级它。到目前为止，我的 /login 端点只返回一个存储在本地存储中的令牌。当令牌存在且有效时，用户登录。 但是现在我还需要在导航栏中显示用户名和用户角色，因为我需要创建一个角色守卫。

我阅读了很多关于这个主题的文章和questions/answer，但我真的很困惑哪一个是获取用户配置文件的最佳方式。

获取

1. 直接在登录时获取用户详细信息以及令牌
2. 登录后，如果登录请求成功，执行另一个请求例如：/me
3. 在令牌负载中添加用户名和角色

商店

此外，详细信息应该是持久的（如果用户关闭并打开浏览器），我如何存储它们？我应该使用 a storage(local storage/cookie) 吗？或者每次用户打开应用时执行一个请求？

使用

这里我没有任何线索。如果我使用存储，我应该每次都阅读它们吗？还是我应该使用主题？

根据您的经验，哪种方法最好？或者你有其他想法？ 提前致谢！

Answer 1

我正在处理这个问题，希望能帮到你。

1. api/login 回复如下：

{
  token: 'your token...',
  expireAt: 'token expire time',
  user: {
    name: 'admin',
    role: 'master'
    // ... else user info
  }
}

2. 使用localStorage保存令牌和用户信息。下次打开同一个网站时可以从本地存储获取token信息，根据过期时间判断是否需要重新登录。

3. cookie 不应该保存复杂或大的数据结构，因为它：

   • 操作不便
   • 尺寸有限
   • 每次http请求都要走