angular - 当角度 4 中的链接上没有路由时，如何处理会话超时（或过期令牌）

Question

对于过期的令牌，我有一个非常常见的场景，如下所示，Kindle 帮助我处理这个问题。

我的应用程序会话是 30 分钟，现在假设，我在一个页面上的时间超过 30 分钟，然后单击任何其他页面链接。所以它会重定向到登录页面。在这里，通过路由重定向，因此主动防护出现在图片中并检查令牌是否过期，然后重定向到登录页面。到目前为止看起来不错。它工作正常。

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

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

提前致谢 ！！！

标签： angularsessionsession-timeout

Answer 1

在我们的环境中，为了提供尽可能最好的用户体验，用户不会在会话到期时被重定向到登录页面。

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

这种方法的主要优点是：

1. 避免在重定向期间因丢失未保存的工作而感到沮丧。
2. 更无缝的重新认证体验。

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

如何在 Angular 中实现这一点？

1. 在第一次登录成功时，将会话到期的日期/时间写入 localStorage，例如new Date() + 30 minutes.
2. 注入例如authentication.service.ts在应用程序级别，其setInterval(() => checkSessionTimeout(), e.g every 1 minute) 内部将有一个构造函数。这种方法将确保此方法也将在新选项卡/窗口上运行。
3. 创建一个方法checkSessionTimeout()，输出在会话超时之前剩余的分钟数，并将其写入变量， authentication.service.ts例如sessionTimeoutIn: number;
4. 创建一个包含重新验证模式的组件，如上图所示。在应用程序级别注入此组件<app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>
5. 对于模糊效果，添加一个类到你的 body / main 与[class.blur]="authenticationService.sessionTimeoutIn <= 0"
6. 为了获得更好的体验，创建一个 div 来推动 main / body，并从包含它的顶部进入视图，可以通过以下方式控制<div *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div>：

在这些之后，用户应该不能尝试做任何事情，除了重新认证，你仍然可以使用你的 AuthenticationGuards。

希望能帮助到你。