时间戳

首页 > 解决方案 > 以角度订阅服务功能两次以进行登录

angular - 以角度订阅服务功能两次以进行登录

问题描述

在我的 Angular 7 应用程序中，我有一个登录组件，它从身份验证服务调用登录功能。登录函数执行 http post 请求，然后订阅响应。我想在身份验证服务功能和组件功能中订阅它，所以如果用户没有输入正确的凭据，组件可以在等待请求完成时告诉用户 + 加载微调器。

登录组件：

 onSignIn() {
    if (this.signinForm.invalid) {
      return;
    }
    this.failedSignIn = null;
    this.isLoading = true;
    this.authService.signin(this.signinForm.value.email, this.signinForm.value.password);
    this.isLoading = false;

  }

Auth服务中的登录功能：

 signin(email: string, password: string) {
    const signinData = {email: email, password: password};
       this.http.post<{userEmail: string, userId: string, token: string, refreshToken: string, expiresIn: number, userType: string }>(URL + 'signin', signinData).subscribe(response => {
        // I do stuff in here
      });
  }

我想做什么

  onSignIn() {
    if (this.signinForm.invalid) {
      return;
    }
    this.failedSignIn = null;
    this.isLoading = true;
    this.authService.signin(this.signinForm.value.email, this.signinForm.value.password).subscribe(res => {
    this.isLoading = false;
    this.isAuth = res.isAuth;
});
  }

标签： angulartypescript

解决方案

您可以从 auth 服务返回 observable，并在组件中订阅它。如果你有一堆东西想让服务用它来做，你可以在 auth 服务中编写一个函数，你可以在组件的订阅中调用它。

尝试在多个地方订阅 http 调用可能是个坏主意（假设这是可能的）。

认证服务

signin(email: string, password: string) {
   const signinData = {email: email, password: password};
   return this.http.post<{userEmail: string, userId: string, token: string, refreshToken: string, expiresIn: number, userType: string }>(URL + 'signin', signinData);
} 

doStuff(){/*do stuff*/}

零件

onSignIn() {
   if (this.signinForm.invalid) {
      return;
   } 
   this.failedSignIn = null;
   this.isLoading = true;
   this.authService.signin(this.signinForm.value.email, this.signinForm.value.password)
      .subscribe(res => {
          //do stuff if you want
          this.authService.doStuff();
          this.isLoading = false;
          this.isAuth = res.isAuth;
      });
}

推荐阅读