Question

我试图制作一个角度为7的登录组件。我已经创建了用于注册和登录的所有必需服务，并且它们正在工作。但是我也想处理在数据库中找不到userid / email并在客户端显示消息的情况。

login.component.html

<div *ngIf="invalidLogin">Invalid username or email</div>

login.component.ts

constructor(private usersrv: UsersService) {}

onLogin() {
  const user: UserDetails = { 
    userid: "user",       
    email: "user@test.com",
    password: "123"     
  }  
  return this.usersrv.login(user)
    .subscribe(
      res => {
        console.log('response found');
        this.invalidLogin = false;
      },
      err => {
        console.log('response not found');
        this.invalidLogin = true;
      }
    );
}

user.service.ts

login(user) {
  return this.http.post(`${this.url}/login`, user)  
}

当我输入有效用户"email: "user@test.com"并在控制台上打印response found时，效果很好，但当我输入数据库中不存在的无效用户（如{{ 1}}。

在没有服务响应的情况下，似乎没有出现在其他部分，请相应地更改this.invalidLogin。请提出如何处理这种情况的建议。

谢谢

Answer 1

有两种解决方案

在第一个中，如果用户无效，则可以从服务器端引发异常。在这种情况下，以下代码有效

    return this.usersrv.login(user)
           .subscribe(res => {
               console.log('response found');
               this.invalidLogin = false;
               },
               err => {
               console.log('response not found')
               this.invalidLogin = true;
               });
  }

第二种情况是在服务器端引发了异常，但状态代码设置为401（未授权）。在这种情况下，代码有所更改。您的服务应如下所示。

login(user){
    return this.http.post(`${this.url}/login`, user,{observe: 'response'})  
  }

login.component.ts

  constructor(private usersrv: UsersService) {}

  onLogin() {
      const user:UserDetails = { 
        userid: "user",       
        email: "user@test.com",
        password: "123"     
      }  
      return this.usersrv.login(user)
             .subscribe(res => {
                 if(res.status==200){
                 console.log('response found');
                 this.invalidLogin = false;
                 } 
                 else{
                   console.log('response not found')
                   this.invalidLogin = true;
                 }
                 //status code should be 401 for unauthorized user
                 });
    }

未经授权的用户的状态码应为401。上面的else子句是通用的

Answer 2

在订阅管道之前，它添加了catchError运算符

login(user).pipe(
catchError() {
// handle error
}
).subscribe(res => {
      console.log('response found');
       this.invalidLogin = false;
})

Answer 3

hi错误不是订阅功能的一部分，当服务器端发生异常或由于服务器或互联网连接问题发送错误时，它会触发如果要处理此问题，则已从服务器发送数据。例如，如果找到电子邮件，则发送真值服务器，然后签入订阅您已经从服务器isEmailFound发送了价值，请在subs函数中签入

return this.usersrv.login(user)
       .subscribe(res => {
           console.log('response found');
           this.invalidLogin = res.isEmailFound;
           },
           err => {
           console.log('something went wrong')
           this.invalidLogin = false;
           });

}

Angular-如何http服务订阅而无响应

3 个答案: