angular 中 link 上没有路由时如何处理会话超时（或过期令牌） 4

Question

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

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

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

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

提前致谢！！！

Answer 1

在你的 CanActivate 路由守卫中，你可能会返回 Promise<boolean> 或 Observable<boolean> 或 boolean。

但是在同一个保护文件中，您可能还依赖于 returns 对您 true 或 false 的服务，具体取决于令牌是否已过期。这是 in-turn 您可能会从 Guard 返回的东西。

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

现在，在刷新此数据之前，您可以再次检查是否相同，方法是将此 AuthService 作为依赖注入到数据服务中，然后检查令牌是否已过期。

或者，您的API可以检查此请求是否已通过身份验证。为此，您需要为每个请求发送授权 Header。在这种情况下，您可以使用 HttpInterceptor。此拦截器将拦截每个传出请求，以检查它是否有 Authorization header 存在。如果存在，只有到那时它才会允许请求继续进行。如果没有，您可以通过将用户导航回登录页面来完成必要的工作。

Answer 2

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

相反，整个页面是模糊的，并显示一个模式，要求输入密码并包含一个提交按钮，如上所示。

这种方法的主要优点是：

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

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

如何在 Angular 中实现？

1. 在第一次成功登录时，写入会话将要执行的 date/time 过期到 localStorage 例如 new Date() + 30 minutes.
2. 在应用级别注入例如 authentication.service.ts，这将 有一个 setInterval(() => checkSessionTimeout(), e.g every 1 minute) 在它的构造函数中。这种方法将确保这种方法 将 运行 在新标签页上 / windows 也是。
3. 创建一个方法 checkSessionTimeout() 输出多少分钟 剩余直到会话超时并将其写入变量中 authentication.service.ts 例如 sessionTimeoutIn: number;
4. 创建一个包含重新验证模态的组件 如上图所示。在应用程序级别注入此组件 <app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>
5. 为了模糊效果，添加一个 class 到你的 body / main 和 [class.blur]="authenticationService.sessionTimeoutIn <= 0"
6. 为了更好的体验，创建一个 div 推送主 / body，并从包含它的顶部进入视图，它可以 用 <div *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div>:
控制

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

希望对您有所帮助。