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

在之前的章节中，我们成功改进了 UI 标题。 我们将对消息做同样的事情。 我们希望仅在我们通过身份验证后才显示编辑和删除按钮。 我们将实现与改进 UI 标题相同的逻辑。 我们将执行以下步骤来执行此操作

1) 我们将转到 post-list.component.ts 文件，并将我们的身份验证服务注入到构造函数中，如下所示

2) 现在，我们再次需要设置一个侦听器，因此我们将为订阅添加一个私有属性，即 authStatusSubs，它的类型将是 subscription。 在这个组件中，我们已经设置了 ngOnInit() 和 onDestroy() 方法。 我们将转到 ngOnInit() 方法，在这里我们将在 post-service 订阅旁边设置侦听器。 我们将调用 authservice 的 getAuthStatusListener() 方法，并将 subscribe 方法附加到它。

我们知道订阅调用的结果是订阅，我们将它存储到 authStatusSub 属性中。

我们需要在 subscribe 方法中做一些事情。 在 subscribe 方法中，我们知道我们得到的是 Boolean 类型的结果。 我们将把该结果存储在一个新的属性中，即 userIsAuthenticated。

3) 我们还需要在 onDestroy() 上取消订阅 authStatusSub。 我们将通过以下方式进行操作

4) 现在，我们将在我们的模板中使用该 UserIsAuthenticated 属性。 因此，我们将返回到我们的 post-list.component.ts 文件，并且我们知道我们需要限制具有编辑和删除按钮的 mat-action-row。 因此，我们将设置 *ngIf 等于 userIsAuthenticated。

现在，只有在我们通过身份验证后才应显示编辑和删除按钮。 我们保存所有文件并转到我们的 angular 应用程序。 如果我们没有登录，我们将看不到编辑和删除按钮。 因此，对于未经身份验证的用户，它将可以正常工作，但是如果用户在登录后访问此页面，他也不会看到这些按钮。

现在，问题出在 post-list 组件中。 我们正在设置我们的侦听器，这意味着每当我们推送该身份验证信息时，它将在此处更新。 问题是 post-list 组件是在我们登录后加载的，因为我们已经导航到它。 ngOnInit() 方法仅在我们通过身份验证后运行。 因此，这意味着在创建 post-list 组件之后，没有新的信息被推送，我们不会在此处获取当前信息，而只是推送新的信息。

5) 有几种方法可以解决此问题。 使用不同类型的主题是其中之一。 有一个主题应该自动产生以前的值，但是我们将使用一种非常直接的方式。 在 authservice 中，我们将添加一个新属性。 即， isAuthenticated，我们最初将其设置为 false。 我们将在推送该信息的同一位置将其设置为 true。

6) 如果我们有令牌，我们想这样做。 首先，我们将检查我们是否具有该令牌，因为我们可能会收到一个不包含令牌的响应。 因此，只有当我们有令牌时，我们才会将 isAuthenticated 设置为 true 并设置侦听器。

7) 现在，我们有了这个 isAuthenticated 属性。 我们可以在顶部添加一个新方法，即 getAuthStatus()，在那里我们将返回此 isAuthenticated

8) 现在，我们将调用此方法来确定用户是否通过身份验证。 因此，在 post-list 组件中，我们将简单地调用该方法来获取该信息。

现在，我们保存所有文件并尝试在登录后查看消息。

一切正常，现在我们需要连接注销按钮。 我们还有另一个问题，那就是如果我们未经身份验证，我们仍然可以通过手动输入 URL 来创建一个新帖子，我们想阻止这种情况。 我们将在下一节中稍后完成所有这些操作。