typescript - Helpoin tapa päivittää Angular 4 -sivu kirjautumisen jälkeen

Minulla on yksinkertainen Angular 4 -projekti, joka näyttää tältä:

app.component.html

<alert></alert> <-- Alert service
<cat-header></cat-header> <-- Site header with Sign in button
<router-outlet></router-outlet> <-- Main content
<cat-footer></cat-footer> <-- Site footer

Kun Kirjaudu sisään -painiketta painetaan, se siirtyy Kirjautumis-komponenttiin (eri sivu). Se käyttää valtuutuspalvelua tarkistaakseen käyttäjän tietokannasta, ja jos hänet löydetään, tallentaa hänet.

localStorage.setItem('currentUser', JSON.stringify(user));

Onnistuneen kirjautumisen jälkeen kirjautumiskomponentti siirtyy pääsivulle

this.router.navigate([this.returnUrl]);

Ongelma on, että navigoinnin jälkeen Header-komponenttia ei päivitetä (esimerkiksi ei Konstruktorin eikä ngOnInit-koodia kutsuta). Kun painan selaimessani Ctrl+F5 alkuperäisen navigoinnin jälkeen, Header-komponentti päivittyy kuten sen pitäisi.

Olen yrittänyt etsiä tätä tapausta Internetistä ja löytänyt joitain monimutkaisia ratkaisuja, kuten Emittereiden tai Dummy-polkujen käyttö sivun uudelleenlatauksen kanssa. Mutta se näyttää hyvin monimutkaiselta ratkaista niin yksinkertainen tehtävä.

Tässä on otsikkokomponenttini:

export class HeaderComponent implements OnInit {

currentUser: User;
constructor(private activatedRoute: ActivatedRoute, private userService: UserService) {
    this.activatedRoute.params.subscribe(data => {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    });
}

ngOnInit() {
}
}

Ja tässä on koodi Header-komponentin mallissa, jossa on Kirjaudu sisään -painike:

<a *ngIf="currentUser; else notLogedIn" href="javascript: void(0);" [routerLink]="['/login']">Log off</a>

<ng-template #notLogedIn><a href="javascript: void(0);" [routerLink]="['/login']">Log in</a>

Joten tällä hetkellä se näyttää vain erilaista linkkitekstiä.

Tämän logiikan visualisointi:

  1. Pääsivu onnistuneen kirjautumisen jälkeen, käyttäjä on kirjautunut sisään
  2. Etusivu manuaalisen päivityksen jälkeen Ctrl + F5 -näppäinyhdistelmällä tai logoa klikkaamalla

Vastaus #1

Olen kokeillut erilaisia lähestymistapoja ja tehnyt helpoimman ratkaisun oman näkökulmani mukaan.

Olen luonut palvelun nykyisen käyttäjän tilan tarkistamista varten:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';   

@Injectable()
export class CurrentUserService {
itemValue = new Subject<string>();

set currentUser(user) {
  this.itemValue.next(user);
  localStorage.setItem('currentUser', user);
}

get currentUser() {
  return localStorage.getItem('currentUser');
}
}

ja tilannut tämän palvelun otsikkokomponentistani:

currentUser: User;
constructor(private currentUserService: CurrentUserService) {
     currentUserService.itemValue.subscribe(currentUser => {
     this.currentUser = JSON.parse(currentUser);
    });
}

Se toimii kuin unelma!

Vastaus #2

Tee palvelu tietääksesi, onko käyttäjä kirjautunut sisään vai ei

<cat-header *ngIf="userService.isLoggedIn()"></cat-header>


isLoggedIn(){
   return true/ false ;
}