一种解决方式是通过禁用按钮来防止用户多次点击。在提交表单之前禁用按钮，等待结果返回后再启用。

在HTML模板中添加以下代码：

Submit

在组件中添加以下代码：

isSubmitting = false;

submitForm() {
  this.isSubmitting = true;
  this.authService.login(this.username, this.password).subscribe(
    success => {
      // handle success
      this.isSubmitting = false;
    },
    error => {
      // handle error
      this.isSubmitting = false;
    }
  );
}

这样，当用户点击按钮时，按钮将被禁用，并且isSubmitting标志将设置为true。在结果返回后，该标志将设置为false，并且按钮将重新启用。

另一种防止多次提交的方法是使用rxjs操作符exhaustMap。该操作符在当前操作完成之前会忽略所有后续操作。

在组件中添加以下代码：

submitForm() {
  this.authService.login(this.username, this.password).pipe(
    exhaustMap(() => this.authService.getProfile())
  ).subscribe(profile => {
    // handle success
  }, error => {
    // handle error
  });
}

首先，当用户提交表单时，将调用authService.login方法。一旦登录成功，它会发出一个认证令牌。然后，令牌将被传递给authService.getProfile方法，该方法将返回用户资料。

由于使用了exhaustMap操作符，在登录请求完成之前，任何后续操作都将被忽略。这将防止用户多次发出请求。

请注意，使用exhaustMap方法时，你需要使用pipe操作符将其应用到Observable流中。