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

Question

我有一个非常常见的过期令牌方案，如下所示，Kindle协助我如何处理这个问题。

我的应用程序会话是30分钟，现在让我们说，我在一页超过30分钟，然后点击任何其他页面链接。所以它会重定向到登录页面。在这里，通过路由重定向所以主动警卫进入图片并检查令牌是否过期然后重定向到登录页面。到目前为止看起来不错。它工作正常。

但是，让我们说，我在刷新表记录的同一页面上有一个刷新链接（通过调用new get http请求刷新表记录）（它不是整个页面刷新）。如果我在同一页面上超过30分钟，并点击刷新按钮，如何检查令牌是否已过期。因为，在此刷新方案中，路由未被使用，因此它不会进入主动保护以检查令牌是否已过期。

你能指导我如何处理这个用例吗？

提前致谢 ！！！

Answer 1

在你的CanActivate路线卫队内你可能会返回Promise<boolean>或Observable<boolean>或boolean。

但是在同一个防护文件中，您可能还依赖于根据令牌是否已过期而返回给您true或false的服务。而这又是你可能从卫兵那里回来的东西。

我们假设AuthService正在检查Auth Token是否已过期。数据服务正在为您获取数据。

现在，在刷新此数据之前，您可以通过在DataService中将此AuthService作为依赖项注入然后检查令牌是否已过期来再次检查相同内容。

或者，您的API可以检查此请求是否经过身份验证。要做到这一点，它需要您发送每个请求的授权标头。在这种情况下，您可以使用HttpInterceptor。此拦截器将拦截每个传出请求，以检查它是否存在Authorization头。如果存在，则只有这样才允许请求继续。如果没有，您可以通过导航用户返回登录页面来满足需要。

Answer 2

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

相反，整个页面都模糊不清，并显示需要输入密码并包含上述提交按钮的模式。

这种方法的主要优点是：

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. 对于模糊效果，使用[class.blur]="authenticationService.sessionTimeoutIn <= 0"为您的身体/主要添加一个类
6. 为了获得更好的体验，创建一个推动主体/主体的div，然后从包含它的顶部进入视图，可以使用

   <div
   *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div>

   控制：

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

希望能帮助到你。