简体繁体 English

如何，何时何地在Angular 2/5应用程序中刷新令牌？

[英]How, where and when to refresh the token in the Angular 2/5 app?

原文 2017-12-15 10:59:23 0 1 javascript/ angular/ single-page-application/ angular5

Currently I'm working with - 目前，我正在与-

Django REST Framework Django REST框架
Angular 5 角度5
RxJS + RxJS +
OAuth2 OAuth2

The list of paths of all components except the LoginComponent I have AuthGuard where I check whether the data on the token and the user in the localstorage of the browser. 除了LoginComponent之外，所有组件的路径列表都具有AuthGuard，我在其中检查浏览器的本地存储中的令牌和用户上的数据。

If data is available I will return True. 如果有数据，我将返回True。 But as soon as the token expires, I can't do anything with the user. 但是，一旦令牌过期，我就无法对用户执行任何操作。

If I get a 401 code in the service, I can't even redirect the user to the login page since I can't use the router in service. 如果在服务中收到401代码，由于无法在服务中使用路由器，我什至无法将用户重定向到登录页面。

Basically I am wondering how, when and where to update the token in my web app? 基本上，我想知道如何，何时何地在Web应用程序中更新令牌？

Kindly give some knowledge on how to work with tokens. 请提供一些有关如何使用令牌的知识。 Also it would be helpful if any code example is provided. 如果提供任何代码示例，也将很有帮助。

1 个解决方案

You question is too broad, and opinion-based. 您的问题过于笼统，并且基于意见。 But if you want a thrid party point of view, here are my two cents : 但是，如果您想从党派的角度出发，这是我的两分钱：

Storing the Token 存储令牌

Depending on your application, you have several ways of storing a Token. 根据您的应用程序，您有几种存储令牌的方法。

LocalStorage 本地存储

The first solution, the one you used, is storing it in the local storage. 您使用的第一个解决方案是将其存储在本地存储中。 This way, the Token will remain on the device as long as you (or the user) doesn't delete it. 这样，只要您（或用户）不删除令牌，令牌就会保留在设备上。

Session storage 会话存储

The session storage will behave same as local storage, except that the token will be deleted once the user closes his session. 会话存储的行为与本地存储相同，不同之处在于，一旦用户关闭会话，令牌将被删除。

Service storage 服务存储

Last option : storing it in a service : your token will remain as long as your user stays in the scope of Angular (meaning, doesn't reload or change tab). 最后一个选择：将其存储在服务中：只要您的用户停留在Angular范围内（即，不重新加载或更改选项卡），您的令牌就会保留。

How to chose ? 如何选择？

Depends on your application. 取决于您的应用程序。 If you make an application involving high risks after login, then you should consider using the session storage, so that the user gets "removed" as soon as he leaves the page. 如果您在登录后制作的应用程序具有高风险，则应考虑使用会话存储，以便用户离开页面后立即被“删除”。 For a casual application, stay on the local storage. 对于临时应用，请保留在本地存储上。 And if you REALLY want to lock your application up, use the service storage. 如果您真的想锁定您的应用程序，请使用服务存储。

When to store the Token 何时存储令牌

Seems obvious, but you should store it when the user logs in. 似乎很明显，但是您应该在用户登录时将其存储。

Update the Token 更新令牌

You should not have to do that. 您不必这样做。 The Token matches an user, or an user session. 令牌与用户或用户会话匹配。 The only update you should do is a deletion, not a rewrite. 您唯一要做的更新是删除，而不是重写。

Where to update the Token 在哪里更新令牌

In a service dedicated to Token management. 在专用于令牌管理的服务中。 This is the best practice. 这是最佳做法。

More information 更多信息

You said you had an Auth Guard. 您说您有一个Auth Guard。 This is a good practice. 这是一个好习惯。 but yes, you can redirect the user from your service . 但是可以，您可以从服务中重定向用户 。 Why wouldn't you ? 你为什么不呢？ That's the usual way of asking an user to connect ! 这是要求用户进行连接的通常方式！ Use the router in your service, really, there's no issue with that. 确实，在您的服务中使用路由器是没有问题的。

From my point of view, and what you described, except for the routing in a guard, you're doing it pretty well. 从我的观点以及您的描述来看，除了后卫中的路由外，您做得还不错。 The only advice I would give you is to handle an expiration date on your token, if your application is high risk profiled (and you have to use the session storage). 如果您的应用程序具有高风险配置（并且您必须使用会话存储），我将给您的唯一建议是处理令牌的到期日期。