如何在 Angular 应用程序中存储身份验证令牌 [英] How to store an auth token in an Angular app
问题描述
我有一个与 REST API 服务器通信的 Angular 应用程序 (SPA)，我有兴趣找出存储从 API 服务器返回的访问令牌的最佳方法，以便 Angular 客户端可以使用它来验证未来对 API 的请求.出于安全原因，我想将其存储为浏览器会话变量，以便在浏览器关闭后不会保留令牌.
I have an Angular application (SPA) that communicates with a REST API server and I'm interested in finding out the best method to store an access token that is returned from an API server so that the Angular client can use it to authenticate future requests to the API. For security reasons, I would like to store it as a browser session variable so that the token is not persisted after the browser is closed.
我正在使用资源所有者密码授权实现一个稍微定制的 OAuth 2.0 版本.Angular 应用程序为用户提供了一个表单来输入他们的用户名和密码.然后将这些凭据发送到 API 以换取访问令牌，然后必须将访问令牌作为标头(授权:Bearer %Token%)发送到 API 的所有出站请求，以便它可以授权对其他路由的请求.
I'm implementing a slightly customized version of OAuth 2.0 using the Resource Owner Password grant. The Angular application provides a form for the user to enter their username and password. These credentials are then sent to the API in exchange for an access token which must then be sent as a header (Authorization: Bearer %Token%) for all outbound requests to the API so that it can authorize requests to other routes.
我对 Angular 领域还很陌生，但就处理这些令牌而言，我想要实现的工作流程总结如下.
I'm fairly new to the realm of Angular, but the workflow I would like to implement as far as handling these tokens is summarized as follows.
1) 客户端向 API 发出请求，向其提供用户凭据.
1) The client makes a request to the API providing it with user credentials.
2) 如果此请求成功，令牌将存储在某处(问题在哪里)
2) If this request is successful, the token is stored somewhere (where is the question)
3) 拦截 HTTP 请求.如果设置了令牌，则将其作为标头传递给 API
3) Intercept HTTP requests. If token is set, pass it along as a header to API
4) 浏览器/标签页关闭时令牌被销毁.
4) Token is destroyed when the browser/tab is closed.
我知道 Angular 提供了 $window.sessionStorage，这似乎是我正在寻找的，但我担心根据我的各种资源，它可能无法在所有浏览器上运行读过.这是一个企业级应用程序，必须与各种浏览器(IE、Chrome、Firefox)兼容.我可以放心地使用它并确信它会稳定吗?
I know Angular offers $window.sessionStorage, which appears to be what I am looking for, but I am concerned by the potential for it not to work on all browsers according to various resources I've read. This is an enterprise grade application and must be compatible across a broad range of browsers (IE, Chrome, Firefox). Can I safely use this with the confidence that it will be stable?
据我所知，替代方案是 $window.localStorage 或 cookies ($cookies, $cookieStore).这对我来说不是一个理想的解决方案，因为我不希望这些数据持久化，但如果这更可靠，我将不得不为了兼容性而牺牲效率.我还认为可以简单地将它设置为 $rootScope 上的一个值并以这种方式引用它，但我不确定这是否可行.
The alternatives, from what I understand, are either $window.localStorage or cookies ($cookies, $cookieStore). This would not be an ideal solution for me since I don't want this data to persist, but if this is more reliable I'll have to sacrifice efficiency for compatibility. I was also thinking it might be possible to simply set it as a value on the $rootScope and reference it this way, but I'm not sure if this is feasible.
我希望一切都说得通.任何帮助/建议将不胜感激.谢谢！
I hope that all made sense. Any help / suggestions would be greatly appreciated. Thanks!
推荐答案
$window.sessionStorage 是您要走的路，除非您的目标是非常旧的浏览器.
$window.sessionStorage is the way to go unless you're targeting very old browsers.
根据 www.w3schools.com sessionStorage 支持 IE 8.0、Chrome 4.0、Firefox 3.5 和 Safari 4.0.
According to www.w3schools.com sessionStorage is supported from IE 8.0, Chrome 4.0, Firefox 3.5, and Safari 4.0.
这篇关于如何在 Angular 应用程序中存储身份验证令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
