angular - 当 angular 4 中的链接上没有路由时，如何处理 session 超时(或过期的 token )

Question

对于过期 token ，我有一个非常常见的情况，如下所示，Kindle 帮助我解决这个问题。

我的申请 session 是 30 分钟，现在让我们说，我在一个页面上的时间超过 30 分钟，然后单击任何其他页面链接。所以它会重定向到登录页面。在这里，通过路由重定向，以便主动保护进入图片并检查 token 是否已过期，然后重定向到登录页面。到目前为止看起来不错。它工作正常。

但是，可以说，我在同一页面上有一个刷新链接(通过调用 new get http 请求刷新表记录)，它只是刷新表记录(它不会刷新整个页面)。如果我在同一页面上超过 30 分钟，然后单击刷新按钮，如何检查 token 是否已过期。因为，在这个刷新场景中，路由没有被使用，所以它不会去主动保护来检查 token 是否过期。

您能否指导我如何处理这个用例。

提前致谢 !!!

Answer 1

在我们的环境中，为了提供最佳的用户体验，用户不会在 session 到期时重定向到登录页面。

取而代之的是，整个页面都变得模糊了，并且显示了一个需要输入密码并包含如上提交按钮的模式。

这种方法的主要优点是:

避免在重定向期间丢失未保存的工作而感到沮丧。

更流畅的重新认证体验。

类似于这里描述的一些答案 - https://ux.stackexchange.com/questions/7195/best-practices-for-warning-of-session-expiration

如何在 Angular 中实现这一点？

在第一次成功登录时，写下 session 的日期/时间
过期到 localStorage 例如 new Date() + 30 minutes.

注入(inject)例如 authentication.service.ts在应用程序级别，这将
有一个 setInterval(() => checkSessionTimeout(), e.g every 1 minute)在其构造函数中。这种方法将确保这种方法
也将在新选项卡/窗口上运行。

创建方法 checkSessionTimeout()输出多少分钟
剩余直到 session 超时并将其写入变量authentication.service.ts例如 sessionTimeoutIn: number;

创建一个包含重新验证模式的组件
如上图所示。在应用层注入(inject)这个组件
与 <app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>

对于模糊效果，使用 [class.blur]="authenticationService.sessionTimeoutIn <= 0" 添加一个类到你的 body/main

为了获得更好的体验，请创建一个推主/
body，并从包含 this 的顶部进入 View ，这可以
用 <div *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div> 控制:

在这些之后，除了重新进行身份验证之外，用户应该无法尝试执行任何操作，并且您仍然可以使用您的 AuthenticationGuards。

希望能帮助到你。