在 MEAN Stack 中连接注销按钮并重定向用户

在前一节中，我们成功改进了 UI 头部和 UI 消息。在本节中，我们将学习如何连接注销按钮以及如何将用户重定向到 MEAN Stack。我们将逐步学习这两件事，首先学习如何将注销按钮连接到应用程序。我们将使用以下步骤来完成此操作

1) 我们将返回到我们的 component.ts 文件，并将一个点击监听器添加到注销按钮。我们将在按钮点击时执行 onLogout() 方法。

2) 现在，我们需要在 component.ts 文件中添加此方法。此方法应清除令牌并通知页面上所有感兴趣的部分关于已更改的身份验证状态。

3) 我们需要再次编辑 auth 服务，并且在那里我们需要一个新方法，即 logout。在此方法中，我们要做两件主要的事情，即我们将令牌设置为 null 以清除它，并将 isAuthenticated 设置为 false。

4) 现在，我们需要将该信息传递给任何感兴趣的人。因此，我们将使用我们的 authStatusListener subject 并推送一个新值，该值为 false，因为用户现在不再通过身份验证。

5) 应该从头部组件中的 onLogout() 方法中调用该 logout 方法。因此，在那里我们将访问我们的 authservice，然后调用 logout() 方法。

我们将保存所有文件并转到我们的 angular 应用程序。

一切都运行良好，现在我们将学习如何重定向用户。我们将使用以下步骤来重定向用户

我们将在我们的 auth 服务中实现重定向逻辑，并且 auth 服务是进行操作的好地方，因为我们在那里进行登录和注销。

1) 因此，要重定向用户，我们将必须注入 @angular/router。我们将向构造函数添加一个新参数，该参数是路由器类型。路由器是从 @angular/router 导入的对象或类。

2) 现在，我们将在 login() 方法中使用它。在 subscribe 方法中，当我们知道我们有一个有效的令牌时，最后我们将访问我们的路由器并调用 navigate() 方法。我们要导航到主页，因此我们将斜杠 (/) 传递给该函数。

如果我们要注销，我们也想导航到那里。一旦我们清除所有内容，我们希望离开我们所在的页面，然后返回到主页。

现在，我们将检查在登录或注销后是否将重定向到主页。

3) 重定向到主页运行良好。我们可能会注意到，如果我们单击登录，则必须等待很短的时间。花费的时间用于发送该请求并在服务器上验证用户。在那里显示一个微调器会很好。这只是一个小问题，但是我们想将这样的微调器添加到登录和注册组件。我们的应用程序中已经包含了微调器组件，可以在注册和登录组件中的按钮下方添加一个 mat-spinner 。为此，我们需要知道我们是否正在加载。我们已经在两个组件中都使用了 Loading 属性，我们只需要在加载时设置它即可。

因此，在 onSignup() 方法中，我们将 Loading 设置为 true，并在 onLogin() 方法中也是如此。

登录

注册

4) 现在，在模板中，我们将使用它。如果正在加载，我们要隐藏该按钮，同时，我们希望旋转它们。

我们将为我们的注册组件实现相同的逻辑。

注意：我们已经在顶部实现了 <mat-spinner>，因此我们建议您删除我们在登录和注册组件模板中的按钮下方实现的 <mat-spinner>。

现在，我们将返回到我们的 angular 应用程序，并尝试登录或注册以检查我们的微调器是否运行良好。

一切都运行良好。下一件事是保护路由，因为我们可以通过访问该 URL 来访问新帖子页面。我们将在下一节中稍后执行此操作。