在 Angular SPA 中存储凭据

Posted 2023-03-10

【中文标题】在 Angular SPA 中存储凭据

【英文标题】：Storing credentials in Angular SPA

【发布时间】：2016-07-28 17:34:14

【问题描述】：

我的 Angular SPA 中有一个身份验证服务，它需要存储 JWT 令牌，以便每次都可以将其发送回标头中的服务器（API 要求将其包含在自己的标头中，称为 Authentication-Token )

目前，我的身份验证服务只是将其保存在内存中，但显然，如果刷新页面或他们在新选项卡中打开页面，则需要重新登录，因此我需要将他们的详细信息存储得更长久一些。据我所知，我有几个选择，但没有一个是理想的

A) - 将它们存储在 cookie 中 - 但是令牌将在每次请求时发送两次，以及需要与它一起存储的其他数据，例如用户的个人资料数据。

B) 本地存储 - 这似乎是一个不错的选择，但它有一个限制，如果它已满（假设数据缓存服务正在填充它），那么它就不会存储详细信息。似乎没有办法围起足够的空间来可靠地存储所有用户的详细信息

c) 会话存储 - 同上，但如果用户打开一个新标签则不起作用

d) 在每个页面加载时从服务器向下发送详细信息，并在对 API 进行任何调用之前使用 ng-init 将它们存储在内存中。这很好，但我的网站目前是一个调用 API 的纯 html 网站，目前它不是 php/Node/.net 网站，所以我必须引入服务器端的东西来获取令牌。

那么，有人有更好的想法吗？或者有什么方法可以解决这些问题？

【问题讨论】：

我有一个类似的问题，我们有一个要求，允许用户无限期地保持登录状态。我们使用本地存储并使用基于 cookie 的刷新令牌对其进行备份。当 403 发生时，http 拦截器将使用刷新令牌 cookie 重新请求新令牌。

【参考方案1】：

我通常使用 LocalStorage 或 SessionStorage（取决于要求）。 每个来源限制为 10MB（结合本地和会话），因此您应该能够在您的应用程序中管理它，或者找出其他方法来确保凭据空间受到保护。

【讨论】：

我认为您可能是对的，我担心我可能需要使用其他人的服务，这可能会占用所需的空间。例如，一些缓存服务只是一直缓存数据，直到它们用完空间，此时我可能无法更新我的凭据。我想可能发生的最坏情况是我要么转储缓存，要么用户必须重新登录。

“别人的服务”？我不确定你的意思。你的意思是你正在使用 3rd 方 angularjs 服务，但你不确定它是做什么的？

是的，我的意思是，如果您使用的是一堆第三方库，那么其中一个可能会使用本地存储并且可能会填满它。更糟糕的是，如果需要空间，或者可能会删除您的凭据。还是需要知道变量的名称才能删除它？

我有理由相信，在这种情况下，您没有受到保护，免受穷人的侵害。因此，一种解决方案是从 CDN（或至少另一个子域）为您的第三方库提供服务，这应该将它们划分到自己的本地存储空间中。

啊，从不同的域为他们提供服务是个好主意。