如何在 Angular 应用程序中存储身份验证令牌

Posted 2023-03-05

【中文标题】如何在 Angular 应用程序中存储身份验证令牌

【英文标题】：How to store an auth token in an Angular app

【发布时间】：2014-07-09 12:26:29

【问题描述】：

我有一个与 REST API 服务器通信的 Angular 应用程序 (SPA)，我有兴趣找出存储从 API 服务器返回的访问令牌的最佳方法，以便 Angular 客户端可以使用它来验证对 API 的未来请求。出于安全原因，我想将其存储为浏览器会话变量，以便在关闭浏览器后不会保留令牌。

我正在使用资源所有者密码授权实现一个稍微定制的 OAuth 2.0 版本。 Angular 应用程序为用户提供了一个表单来输入他们的用户名和密码。然后将这些凭据发送到 API 以换取访问令牌，该令牌必须作为标头（授权：Bearer %Token%）发送到 API 的所有出站请求，以便它可以授权对其他路由的请求。

我对 Angular 领域还很陌生，但就处理这些令牌而言，我想实现的工作流程总结如下。

1) 客户端向 API 发出请求，向其提供用户凭据。

2)如果此请求成功，则令牌存储在某处（问题在哪里）

3) 拦截 HTTP 请求。如果设置了令牌，则将其作为标头传递给 API

4) 关闭浏览器/标签时，令牌被销毁。

我知道 Angular 提供 $window.sessionStorage，这似乎是我正在寻找的，但我担心它可能无法根据各种资源在所有浏览器上工作我'我读过。这是一个企业级应用程序，必须兼容各种浏览器（IE、Chrome、Firefox）。我可以放心使用它并确信它会稳定吗？

据我了解，替代方案是 $window.localStorage 或 cookie（$cookies、$cookieStore）。这对我来说不是一个理想的解决方案，因为我不希望这些数据持续存在，但如果这更可靠，我将不得不牺牲效率来实现兼容性。我还认为可以简单地将其设置为 $rootScope 上的值并以这种方式引用它，但我不确定这是否可行。

我希望这一切都说得通。任何帮助/建议将不胜感激。 谢谢！

【问题讨论】：

你找到了一个好方法吗？我这里也有类似的情况。

【参考方案1】：

如果您正在寻找绝对不会持久的东西，那么我只会将令牌保存在内存中，而不是依赖浏览器进行存储。但是存储在 rootScope 中并不是最佳实践。

如果您还没有这样做，我建议您将服务器访问代码包装在 Angular 服务中。然后，您可以在运行时将令牌封装在该服务中（例如作为属性），而不必担心在从应用程序的其他部分调用时必须访问它。

Angular Services 是单例的，因此您的“服务器服务”将是一个全局实例，可以使用正常的依赖注入进行访问。

【讨论】：

这不起作用...或在用户刷新页面之前工作...然后授权消失...

@AliBriceño 如果用户刷新页面，您可能需要检查超时或重新授权

嗨@Exzile 感谢您的回答。可以举个例子吗？

@AliBriceño 我最终使用了 $Cookies ngCookies。登录时我只是设置一个 cookie 值并在加载时检查它。

【参考方案2】：

$window.sessionStorage 是最好的选择，除非您的目标是非常旧的浏览器。

根据www.w3schools.com，IE 8.0、Chrome 4.0、Firefox 3.5 和 Safari 4.0 支持 sessionStorage。