如何存储一个身份验证令牌在角应用 [英] How to store an auth token in an Angular app

问题描述

我有一个角应用（SPA），与一个REST API服务器通信，我很感兴趣，找出最好的方法来存储来自API服务器返回一个访问令牌，这样的角度客户端可以使用它来验证到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的定制版本。的角应用提供用于用户输入其用户名和密码的形式。这些凭据然后发送到API作为交换，然后必须为标题发出一个访问令牌：对所有出站请求的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.

我是相当新的折角的境界，但工作流程，我想尽可能处理这些令牌总结如下实施。

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.

我知道角报价 $ window.sessionStorage ，这似乎是我所期待的，但我的潜在关心它没有按照我的各种资源上的所有浏览器读过。这是一个企业级应用，并且必须是在广泛的范围内的浏览器（IE，铬，火狐）兼容。我可以放心地有信心用这个，这将是稳定的？

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或饼干（饼干$，$的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.

我希望所有有意义。任何帮助/建议将不胜AP preciated。
谢谢！

I hope that all made sense. Any help / suggestions would be greatly appreciated. Thanks!

推荐答案

如果你正在寻找的东西，肯定不会坚持那么我会简单地保持令牌在内存中，而不是依赖于浏览器进行存储。但是里面rootScope存储不会是最好的做法。

If you are looking for something that will definitely not persist then I would simply keep the token in memory and not rely on the browser for storage. However storing inside rootScope would not be best practice.

我建议你换你的服务器访问code在角服务，如果您还没有这样做的话。然后，您可以该服务在运行时（例如，​​作为一个属性）中封装你的令牌，而不必担心你的应用程序的其他部分时调用来访问它。

I would recommend that you wrap your server access code in an Angular Service if you have not done so already. You can then encapsulate your token within that Service at runtime (e.g. as a property) without worrying about having to access it when calling from other parts of your application.

角度服务是单身所以你的服务器服务将是一个全球性的实例，可以使用普通的依赖注入访问。

Angular Services are singleton so your "server service" will be a global instance that can be accessed using normal dependency injection.

这篇关于如何存储一个身份验证令牌在角应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！