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

Question

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

我正在使用资源所有者密码授权实现一个稍微定制的OAuth 2.0版本.Angular应用程序提供了一个表单,供用户输入其用户名和密码.然后将这些凭证发送到API以换取访问令牌,然后必须将其作为标头(授权:承载%令牌%)发送给API的所有出站请求,以便它可以授权对其他路由的请求.

我对Angular的领域还很陌生,但是我想在处理这些令牌时实现的工作流程总结如下.

1)客户端向API发出请求,为其提供用户凭据.

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

3)拦截HTTP请求.如果设置了token,则将其作为标头传递给API

4)浏览器/选项卡关闭时,令牌被销毁.

我知道Angular提供$ window.sessionStorage,这似乎是我正在寻找的,但我担心它根据我读过的各种资源不能在所有浏览器上工作.这是一个企业级应用程序,必须兼容各种浏览器(IE,Chrome,Firefox).我能安全地使用它,并确信它会稳定吗？

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

我希望一切都有道理.任何帮助/建议将不胜感激.谢谢!

Answer 1

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

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

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