Question

我必须在令牌到期5分钟之前显示警报消息。我已经尝试过此解决方案。

showTokenExpiryAlert() {
    /* Convert expiresIn (seconds) to expiresIn (miliseconds) */
    const expiresIn = this.expiresIn * 1000;

    /* calculate alert time from expiresIn (miliseconds) */
    const alertTime = expiresIn - 300000;

    /* Show alert message before 5 mins of token expiry time */
    setTimeout(() => {
      alert('Token will be exppired soon');
    }, alertTime);
  }

此代码运行正常。但是，页面刷新失败。因此，我正在考虑使用redux，但没有获得有关如何为此使用redux的确切解决方案。

Answer 1

假设您将ngrx用作Angular的Redux实现：

默认情况下，ngrx / store会将所有状态保留在内存中，因此，即使重新使用页面，整个页面的重新加载也会使整个应用程序状态丢失。
您可以尝试save whole ngrx app state in localStorage，但这是更广泛的任务，以防您只需要检查令牌是否已过期

所以最好做上面@Aarsh提出的事情。

创建以下服务：

将到期时间存储在localStorage中并启动计时器
在应用程序启动（页面重新加载）时从localStorage重新读取到期时间，如果已经存在到期时间，则重新启动计时器

Answer 2

您应该做的第一件事是将过期警报的显示逻辑移动到始终存在（例如，header-component）但仅在成功登录后才激活的组件内。登录组件将在成功登录后在localStorage中设置到期时间，并设置一个标志，以便可以初始化headerComponent。您的标头组件从localStorage中读取值并启动一个计时器。

showTokenExpiryAlert() {
    /* Convert expiresIn (seconds) to expiresIn (miliseconds) */
    const expiresIn = localStorage.getItem('expiresIn') * 1000;

    /* calculate alert time from expiresIn (miliseconds) */
    const alertTime = expiresIn - 300000;

    if (alertTime > 0) {
        /* Only show the alert if the token hasn't already expired */
        setTimeout(() => {
          alert('Token will be exppired soon');
        }, alertTime);
    }
    else {
       localStorage.removeItem('expiresIn');  // token already expired
       // navigate to login
    }
  }

不要使用SessionStorage代替localStorage，它会在浏览器关闭时清除。

如何通过Redux使用设置超时

2 个答案: