angular 5 Post-Anfrage kehrt zweimal zurück

Question

Nachdem ich mich anmelde, authservice aufgerufen wird und dann das Routing auf die Profilkomponente funktioniert.

Allerdings wird die Post-Anfrage zweimal gesendet, ich verwende nicht Cors, also nehme ich an, dass dies keine Preflight-Anfrage sein kann? Profile.componence.ts ngoninit scheint zweimal zu laufen, da ich zuerst coinId mit der richtigen ID gefolgt von einer undefinierten coinId erhalte.

5a273e34f5c5643e18c035dacoinId from profile2! 
    main.f2eaf663cdbf963d2af8.bundle.js:1 undefinedcoinId from profile2! 

Ich bin ganz neu auf all dies, ich bin erwägen einen nginx Server gestartet, aber nicht sicher, ob das dieses Problem lösen würde.

login.component.ts

let url = 'http://localhost:3000/api/login'; 
    this.newService.login(url, user, user.username).subscribe(result => { 

var value = result["user"]; 
var coinId = result.user.coinid; 
this.router.navigate(['/profile', coinId]); 

auth.service.ts

login(url: string, user: any, username: any) 
    {return this.http.post(url , user) 
    .do (res => this.setSession(res)) 
    } 

    private setSession(authResult) { 

     const expiresAt = moment().add(authResult.expiresIn,'second'); 
     this.loggedIn.next(!!localStorage.getItem('id_token')); 

     console.log(authResult.token + "dit is de token"); 
     localStorage.setItem('id_token', authResult.idToken); 

     localStorage.setItem("expires_at", JSON.stringify(expiresAt.valueOf())); 

    }  

profile.component.ts

ngOnInit() { 
    var coinId = this.route.snapshot.params['id']; 
console.log(coinId + "coinId from profile2!") 


    this.router.navigate([ '/profile', {outlets: { formOutlet: 
    ['profileform', coinAId]}}]); 
    } 

Answer 1

I bin ziemlich neu in Angular, aber Sie können shareReplay() verwenden, um Multicasting Ihrer POST-Anfrage zu vermeiden. RxSwift stellt verschiedene Operatoren zur Verfügung, wenn Sie mehrere Abonnements für dasselbe Observable haben und sicherstellen möchten, dass Ihr Code nicht erneut für Abonnements erneut & erneut ausgeführt wird oder bis das Abonnement abgelaufen ist. Die verfügbaren Operatoren sind replay(), replayAll(), publish(), share() und shareReplay().

Versuchen Sie den Code zu ändern, wie unten:

login(url: string, user: any, username: any) 
    {return this.http.post(url , user) 
    .do (res => this.setSession(res)) 
    .shareReplay() 
    } 

shareReplay() sorgt für ein einziges Abonnement. shareReplay wird Ereignisse von der Quelle, die für Abonnenten beobachtbar sind, wiedergeben, sobald diese Ereignisse gesendet werden. Gemäß Dokumentation:

Gibt eine beobachtbare Sequenz zurück, die eine einzige Subskription für die Wiedergabe der zugrunde liegenden Sequenz wiedergibt, die einer maximalen Zeitdauer für den Wiedergabepuffer unterliegt. Dieser Operator ist eine Spezialisierung der Wiedergabe, die mit der verknüpfbaren beobachtbaren Sequenz verbunden ist, wenn die Anzahl der Beobachter von auf null geht, und trennt sich, wenn keine weiteren Beobachter mehr vorhanden sind.

Github Docs & Example

Also See this question on Stackoverflow with simplified explanation