Angular 4 - Erfassen des Err-Objekts von Service zu Component

Question

Ich arbeite an einer Login-Seite mit eckigen als Front-End und Feder-Sicherheit als Back-End, alles scheint gut zu funktionieren, aber wenn ich versuche, zu behandeln Die Ausnahme durch Abfangen des Fehlers vom Dienst zur Komponente funktioniert nicht.

service.ts

login(form) { 
     var objectToSend = 'j_username=' + form.j_username + '&j_password=' + form.j_password; 
     const headers = new Headers(
     { 
      'Content-Type': 'application/x-www-form-urlencoded', 
     } 
    ); 
     const options = new RequestOptions({headers: headers, withCredentials: true}); 
     return this.http.post('http://localhost:8080/***********/authenticate', objectToSend, options) 
     .map((res) => res) 
     .catch((error: any) => { 
      if (error.status === 401) { 
      console.log(error.status + ' is the current status'); 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 400) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 409) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 406) { 
      return Observable.throw(new Error(error.status)); 
      } 
     }); 
    } 

login.component.ts

 loginProcess() { 
     this._authenticationService.login(this.form.value).subscribe(
     res => { 
      this.data = res; 
      if (res.status === 200) { 
      this._authenticationService.getRoles().subscribe(
       resp => { 
       if (resp.status === 200) { 
        this.roles = JSON.parse(resp.text()); 
        this.role = this.roles[0].authority; 
        localStorage.setItem('role', this.role); 
        this.connectedUser.eusLogin = this.form.value.j_username; 
        this.saveConnectedUser(this.connectedUser); 
        this.updateSessionTimeOut(); 
        if (this.role === 'ROLE_ADMIN') { 
        this._router.navigate(['home']); 
        } 
       } else { 
        this.showErrorMsgDetail = true; 
        this.error = true; 
       } 
       }, 
       error => { 
       this.error = true; 
       } 
      ); 
      } else { 
      } 
     }, 
     err => { 
      if (err.status === 401) { 
      this.showErrorMsgDetail = true; 
      this.errorMsgDetail = 'Bad credentials, try again'; 
      } 
     } 
    ); 
    } 

Das Problem ist der Antwortcode von dem Dienst an die Komponente in fallendem, auf Komponentenebene err .status ist nicht definiert.

Hoffe ihr Jungs könnt das herausfinden.

Answer 1

Sie versuchen, ohne Ereignisemitter oder BehaviorSubject zu kommunizieren, wie möchten Sie den Fehler irgendwo anders abfangen?

Sie müssen Ihren Fehler im Dienst abfangen, ihn in Ihre Login-Komponente im Konstruktor einfügen und dann müssen Sie nur Ihren Dienst von Ihrer Komponente aus aufrufen, indem Sie this.myService.getDataFromWebService (post) verwenden.

getDataFromWebService(postData: Kpi): EventEmitter<Kpi> { 
    const event: EventEmitter<Kpi> = new EventEmitter(); 
    this.sendPost(myService.API_PATH, postData).subscribe((data) => { 
     try { 
     if (this.checkError(data)) { 
      const parseData: Kpi = Kpi.parse(data); 
      event.emit(parseData); 
     } else { 
      event.emit(new Kpi()); 
     } 
     } catch (ex) { 
     this.env.error("Unknown error", "Invalid data received"); 
     console.log("Exception", ex); 
     kpiEvent.emit(new Kpi()); 
     } 
    }); 
    return event; 
    }