从服务传递到组件的角度错误消息

Posted

技术标签:

【中文标题】从服务传递到组件的角度错误消息【英文标题】:Angular error message from service pass to component 【发布时间】:2020-04-08 07:32:35 【问题描述】:

我想请教如何设法让我的错误响应从后端显示在前端。对于后端,我使用的是 Spring boot 2,对于前端,我使用的是 Angular 8。所以在我尝试登录时,如果用户没有提供正确的凭据,那么用户会收到一条错误消息,但在我的情况下我正在使用一项服务,当用户在提供电子邮件和密码后单击登录时发出请求。我在控制台中收到错误消息,但它来自我的服务而不是来自组件,我想问我如何将它传递给零件。 例如,我提供了错误的电子邮件或密码,当我单击登录时,我收到带有以下错误消息的 HttpErrorResponse “错误:成功:错误,消息:“无效的电子邮件或密码!””这很好,但我在我的服务中得到了它,如何将此错误传递给登录组件。 (我知道我用 sessionStorage 试过很愚蠢...)

auth.service.ts

 auth(email, password, callback)
    const helper = new JwtHelperService();

    this.http.post('//localhost:8080/login',email, password)
            .subscribe(userData => 
              localStorage.setItem('username', email);
              let tokenStr = 'Bearer ' + userData['accessToken'];
              localStorage.setItem('token', tokenStr);

              const tkn = localStorage.getItem('token');
              const decodedToken = helper.decodeToken(tkn);

              localStorage.setItem('currentUserId', decodedToken['sub']);
              console.log(decodedToken['sub']);

              return callback && callback(userData);
            ,(err: HttpErrorResponse) => 
              console.log(err);
            );

login.component.ts

 login() 
    this.authService.auth(this.user, (e) => 

      let resp: any;
      resp = e.accessToken;

      if (resp != null) 
        // store user details  in local storage to keep user logged in between page refreshes
        this.accountService.loadProfile()
            .subscribe(user => 
              localStorage.setItem('currentUser', JSON.stringify(user));
              this.router.navigateByUrl('/profile');
            , (err:HttpErrorResponse) => 
              console.log(err.error);
            )
      
    );
  

【问题讨论】:

【参考方案1】:

不要订阅 auth.service 而是返回一个 observable 以便它可以在其他地方订阅。进行以下更改:

 auth(email, password, callback)
    const helper = new JwtHelperService();
    return this.http.post('//localhost:8080/login',email, password);             
 

改为订阅login.component.ts

login() 

    ...

    this.authService.auth(...).subscribe(() => 
       // code when it is successful
    , (err:HttpErrorResponse) => 
       console.log(err.error.message);
    

【讨论】:

非常感谢您的帮助!非常感谢。

以上是关于从服务传递到组件的角度错误消息的主要内容,如果未能解决你的问题,请参考以下文章

从组件到服务的角度9传递方法

尝试在 Nuxt 中将数据从组件传递到页面时出现错误消息

将变量从商店绑定到角度ngrx中的组件

将数据从父级传递给子角度4

Angular 6 - 通过服务将消息传递到从组件到消息组件

将数据按角度传递给子组件