改进 UI 标题以反映 MEAN Stack 中的身份验证状态

在上一节中，我们成功地添加了令牌以验证请求。从理论上讲，我们的应用程序现在已经从身份验证的角度进行了构建。从用户体验的角度来看，并没有那么好。我们无法判断我们是否通过了身份验证，也无法判断我们被允许做什么或不能做什么。因此，我们需要做的是，如果登录，我们需要隐藏登录和注册按钮。我们需要显示一个删除令牌的注销按钮。我们还有另一个问题，就是我们看不到我们是否被允许删除或编辑帖子。我们总是看到这些按钮，新帖子也是如此。我们看到即使我们没有通过身份验证也是如此。

因此，我们希望调整 UI 标题以反映我们的身份验证状态，因为这将防止一些不必要的错误。如果我们重新加载页面，我们的令牌就会消失，这是另一个问题。我们的令牌消失了，因为我们只将其存储在 angular 服务中，而该服务仅存储在运行的 JavaScript 中，因此存储在内存中，重新加载页面会重新启动 angular 应用程序，因此，所有内容都存储在服务中，因此内存就消失了。因此，我们也希望将该令牌存储在其他地方，以便它可以在页面重新加载后继续存在。我们将在下一步完成所有这些操作。

现在，我们将首先致力于更新 UI。我们将执行以下步骤来更新 UI

1) 我们已将令牌存储在 auth 服务中，因此我们可以在任何需要该令牌来更新 UI 的组件中注入该服务，而其中一个组件就是标题组件。在标题组件中，我们有一些链接，我们只想在用户通过身份验证时才显示这些链接。另一方面，我们想添加一个新的列表项，用于允许我们注销。它不应该是一个链接；它应该是一个按钮，因此不会有路由器链接。

2) 现在，我们将返回到我们的 component.ts 文件，在这里我们注入了具有令牌的 auth 服务。之后，我们使用该 auth 服务来获取该令牌。

3) 我们还应该有一些侦听器，就像我们对帖子所做的那样，因为这当然会发生变化。例如，如果我们注销并清除该令牌，那么我们希望能够将该令牌信息推送到我们感兴趣的组件。因此，我们将首先转到我们的 service.ts 文件，除了在那里存储令牌之外，我们还希望拥有另一个值或属性，即 authStatusListener。此侦听器将是一个新的 subject，用于将身份验证信息推送到感兴趣的组件。这个 subject 将是一个泛型类型，现在，它将包装一个布尔值，因为我们实际上并不需要在其他组件中使用令牌。我们只需要在拦截器中使用它。

4) 我们将添加一个新方法，即 getAuthStatusListener。它是一个私有属性，因为我们只想返回该侦听器的可观察部分。因此，我们将返回 AuthStatusListener 作为 observable，以便我们无法从其他组件发出新值。我们只想能够从服务中发出，但当然也可以从应用程序的其他部分侦听。

5) 现在，其他部分可以调用此方法来获取侦听器。我们希望在获得令牌后在我们的 login() 方法中发出一个新值。我们将使用侦听器并调用 next() 方法。在此方法中，我们像这样传递值 true

6) 我们有了一种通知对用户是否通过身份验证感兴趣的每个人的方式，现在我们回到我们的标题组件，我们在其中注入 auth 服务。在这里，我们现在将实现 OnInit,，它将从 @angular/core 导入。我们将通过添加 ngOnInit 方法来实现它。

7) 现在，在此方法中，我们将设置对该 AuthStatusListener 的订阅。我们知道我们管理的 observable 或 subject 的订阅也需要进行管理，因此如果组件被销毁，我们应该取消订阅。因此，我们也将实现 onDestroy，这也迫使我们添加 ngOnDestroy 方法。

8) 我们将添加新的私有属性，即 authListenerSubs，它的类型将为 subscription。之后，在 ngOnInit() 方法中，我们将此属性设置为我们从 authService 的 getAuthStatusListener() 方法设置的订阅，然后像这样订阅

9) 在 ngOnDestroy() 方法中，我们将获取该订阅并取消订阅。

10) 在订阅方法中，我们将获取结果，并在此处执行一些操作。我们将设置另一个属性来存储订阅结果。此属性最初将为 false。

11) 因此，现在我们可以将该信息推送到组件并在组件中使用它们，例如此标题组件。现在，我们将在 header.component.html 文件中使用该 userIsAuthenticated 属性。对于新的帖子列表项，我们将添加 ngIf 并将其设置为 userIsAuthenticated。因此，如果用户通过了身份验证，我们才会看到这一点。

以相同的方式，我们将为我们的注销按钮添加此项。对于登录和注册按钮，我们将设置 *ngIf 等于 "!userIsAuthenticated"，如下所示

现在，我们保存所有文件并返回到我们的 angular 应用程序。我们将只看到登录和注册按钮，并且在成功登录后，我们将看到新的帖子和注销按钮。

一切运行良好，我们需要做的是改进 UI 消息以反映身份验证状态。这是我们将在下一节中完成的事情。