typescript - Najjednoduchší spôsob, ako aktualizovať stránku Angular 4 po prihlásení

Mám jednoduchý projekt Angular 4 takto:

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

Po stlačení tlačidla Prihlásiť sa sa presunie na komponent Prihlásenie (iná stránka). Používa Autorizačnú službu na overenie používateľa v databáze a ak je nájdený, uloží ho do

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

Po úspešnom prihlásení sa komponent prihlásenia presmeruje na hlavnú stránku s

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

Problém je v tom, že po dokončení navigácie sa komponent Hlavička neaktualizuje (ani kód v konštruktore, ani v ngOnInit sa nezavolá). Keď stlačím Ctrl+F5 vo svojom prehliadači po počiatočnej navigácii, komponent Hlavička sa aktualizuje tak, ako by mal.

Skúsil som vyhľadať tento prípad na internete a našiel som niekoľko zložitých riešení, ako používanie emitorov alebo falošných ciest s obnovením stránky. Ale zdá sa, že je veľmi zložité vyriešiť takú jednoduchú úlohu.

Tu je môj hlavičkový komponent:

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() {
}
}

A tu je kód v šablóne komponentu hlavičky s tlačidlom Prihlásiť sa:

<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>

Takže v tomto okamihu to len zobrazuje iný text odkazu.

Vizualizácia tejto logiky:

  1. Hlavná stránka po úspešnom prihlásení, používateľ je prihlásený
  2. Hlavná stránka po manuálnej aktualizácii pomocou Ctrl + F5 alebo po kliknutí na logo

Odpoveď č. 1

Vyskúšal som rôzne prístupy a vytvoril najjednoduchšie riešenie z môjho pohľadu.

Vytvoril som službu na kontrolu stavu aktuálneho používateľa:

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');
}
}

a prihlásil sa na túto službu z mojej hlavičkovej komponenty:

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

Funguje to ako kúzlo!

Odpoveď č. 2

Mať službu na zistenie, či je používateľ prihlásený alebo nie

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


isLoggedIn(){
   return true/ false ;
}