Java 从服务传递到组件的角度错误消息
我想征求一些建议,如何从后端获取错误响应以显示在前端。对于后端,我使用Spring boot 2;对于前端,我使用Angular 8。因此,在我尝试登录时,如果用户未提供正确的凭据,则用户会收到错误消息,但在我的例子中,我使用的是一个服务,当用户在提供电子邮件和密码后单击登录时发出请求。我在控制台中收到错误消息,但它来自我的服务,而不是来自组件,我想问如何将其传递给组件。 例如,我提供了错误的电子邮件或密码,当我单击login时,我得到了HttpErrorResponse,并显示以下错误消息“error:{success:false,message:“Invalid email or password!”}”,这很好,但我在服务中得到了它,我如何将此错误传递给登录组件。(试过sessionStorage,我知道很蠢…) auth.service.tsJava 从服务传递到组件的角度错误消息,java,angular,typescript,spring-boot,Java,Angular,Typescript,Spring Boot,我想征求一些建议,如何从后端获取错误响应以显示在前端。对于后端,我使用Spring boot 2;对于前端,我使用Angular 8。因此,在我尝试登录时,如果用户未提供正确的凭据,则用户会收到错误消息,但在我的例子中,我使用的是一个服务,当用户在提供电子邮件和密码后单击登录时发出请求。我在控制台中收到错误消息,但它来自我的服务,而不是来自组件,我想问如何将其传递给组件。 例如,我提供了错误的电子邮件或密码,当我单击login时,我得到了HttpErrorResponse,并显示以下错误消息“e
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);
})
}
});
}
不要在
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);
}
}
非常感谢您的帮助!谢谢。