angularjs - 如何在 Angular 应用程序中存储身份验证 token

Question

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

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

我对 Angular 领域相当陌生，但我想要实现的处理这些 token 的工作流程总结如下。

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

2)如果此请求成功， token 将存储在某处(问题在哪里)

3) 拦截 HTTP 请求。如果设置了 token ，请将其作为 header 传递给 API

4) 关闭浏览器/选项卡时， token 将被销毁。

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

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

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

Answer 1

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

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

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