在 MEAN Stack 中反映 UI 中的令牌过期

在之前的章节中，我们成功地保护了我们的路由，从身份验证的角度来看，应用程序现在看起来不错。我们正在重定向，我们正在更新 UI，我们正在保护，我们正在保护后端。现在，剩余的部分是在 UI 中反映令牌过期。我们的用户没有意识到这一点，因为我们的 UI 不会更新。我们得到了一个令牌，它只是无效的，但在前端，我们不知道，所以我们不知道令牌已过期。嗯，我们可以知道，因为我们知道令牌将在一个小时后过期，实际上，我们甚至可以将该信息与响应一起传递。我们将使用以下步骤来完成该操作

1) 我们将回到我们的 js 文件，我们将在其中将令牌作为响应发回。在这里，我们将添加另一个属性，即 expiresIn 并传递过期信息。我们知道它将从现在开始一个小时，但随后一个小时，我们不想发送硬时间戳，因为时间云的服务器偏离了客户端时间。

相反，我们发回这个持续时间，我们可以发回一个小时，让客户端解析它。

2) 现在，我们将在前端使用该信息。当我们将该令牌存储在 service.ts 文件的 login() 方法中时，我们还会解析它的过期时间，然后设置计时器。为此，在我们的 login 的 subscribe 方法中，我们知道我们得到了 expiresIn 信息，并且只有在我们得到令牌时它才对我们有意义。因此，我们将在 if 检查中提取它，在那里我们将获得 expiresInDuration 属性，它将等于 response.expiresIn，就像这样

我们已经更新了泛型类型。我们在泛型类型中已经有了 expireIn 属性，所以我们不会在那里收到错误。

3) 现在，我们只需要设置一个计时器，我们可以使用 setTimeout() 方法来完成。此方法将返回一个 NodeJS 计时器，并且，此方法还将采用一个函数，该函数应在该持续时间之后执行，然后该持续时间将作为第二个参数传递。

setTimeout() 方法以毫秒为单位工作，而不是以秒为单位。因此，我们必须将其乘以 1000，因为我们知道，我们以秒为单位取回它。

4) 在此持续时间之后，它将执行此函数，并且在此函数中，我们要调用 logout 函数。

5) 我们还应该将时间存储在某个变量中，以便如果我们调用 logout，我们可以清除计时器，因为如果我们手动注销，我们希望清除计时器。这样，如果在那之后我们再次登录，我们就不会在后台运行旧的注销计时器。因此，我们将添加一个新的私有属性，即 tokenTimer，它的类型为 any。

6) 现在，在此属性中，我们存储从 setTimeout() 方法返回的结果，并且在 logout() 方法中，我们将调用 clearTimeout() 方法，并将此 tokenTimer 作为值传递以在每次注销时清除计时器。

现在，它会工作得很好，一切都会工作得很好。现在，不好的一点是，如果我们重新加载页面而不登录，我们必须再次登录，这是因为我们没有坚持该登录状态。令牌仅存储在内存中，正如我们之前提到的，只要 angular 应用程序重新启动，它就会被清除。我们将在下一节中通过将该令牌存储到我们机器的本地存储中来解决这个问题。