Question

我想问一些建议，如何使后端的错误响应显示在前端。对于后端，我使用Spring Boot 2，对于前端，我使用Angular8。因此，在我尝试登录的情况下，如果用户未提供正确的凭据，则用户会收到错误消息，但在我的情况下我正在使用一种服务，当用户在提供电子邮件和密码后单击登录名时会发出请求。我在控制台中收到错误消息，但这是从我的服务而不是组件发出的，我想问一下如何将其传递给零件。例如，我提供了错误的电子邮件或密码，并且当我单击登录时，我收到带有以下错误消息“ error：{success：false，message：“ Invalid email or password！”}}的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);
            })
      }
    });
  }

Answer 1

不要在Uncaught TypeError: Cannot set property '1' of undefined中进行订阅，而是返回一个observable，以便可以在其他地方进行订阅。进行以下更改：

auth.service

相反，您可以从auth({email, password}, callback){ const helper = new JwtHelperService(); return this.http.post('//localhost:8080/login',{email, password}); }

进行订阅

login.component.ts

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

1 个答案: