Angular 2 Router zur URL navigieren, aber immer noch die Quellkomponente rendern

Question

Ich versuche ein Authentifizierungssystem mit Angular 2 zu erstellen, ich benutze angular2-jwt und alles funktioniert gut, aber das Problem habe ich, wenn ein nicht authentifizierter Benutzer versucht, auf eine eingeschränkte Route zuzugreifen, um dies zu handhaben, überprüfe ich, ob der Benutzer in der ngOnInit() - Funktion authentifiziert ist, wenn nicht, sollte der Benutzer zur Anmeldeseite umgeleitet werden, in meinem Fall ändert sich die URL, aber sie rendert trotzdem acced Komponentenvorlage, hier ist mein Code:

import { Component, OnInit } from '@angular/core'; 
import {Router} from "@angular/router"; 

import {UserService} from "../services/user.service"; 

@Component({ 
    selector: 'app-home', 
    templateUrl: '../templates/home.component.html', 
    styleUrls: ['../../assets/styles/home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

full_name: string; 
constructor(private userService: UserService, private router: Router){} 

ngOnInit() { 
    if(this.userService.isTokenExpired()){ 
    this.router.navigate(['']) 
    }else{ 
    this.userService.getSessionData() 
     .subscribe(
     data => { 
      let usrData = data.data.user; 
      localStorage.setItem('user', JSON.stringify(usrData)); 
      this.full_name = usrData.firstname+" "+usrData.lastname; 
      if(usrData.role == 'admin'){ 
      this.router.navigate(['admin']); 
      } 
     }, 
     err => console.log(err) 
    ); 
    } 
    } 
} 

hier ist, wie es aussieht:

Sie können feststellen, dass keine Daten vorhanden sind.

Das Problem ist, dass der gleiche Code in einer anderen Komponente (der AdminComponent) funktioniert.

hier ist mein app.routes.ts Datei:

import {Routes} from "@angular/router"; 

import {AdminComponent} from "./components/admin.component"; 
import {LoginComponent} from "./components/login.component"; 
import {HomeComponent} from "./components/home.component"; 
import {GroupsComponent} from "./components/groups.component"; 
import {TpComponent} from "./components/tps.component"; 
import {TraineeComponent} from "./components/trainee.component"; 
import {RegisterComponent} from "./components/register.component"; 
import {HometpsComponent} from "./components/hometps.component"; 

export const routes: Routes = [ 
    { path: '', component: LoginComponent}, 
    { path: 'login', component: LoginComponent}, 
    { path: 'register', component: RegisterComponent}, 
    { path: 'admin', component: AdminComponent, children: [ 
    { path: '', 
     redirectTo: '/admin/tps', 
     pathMatch: 'full'}, 
    { path: 'tps', component: TpComponent}, 
    { path: 'groupes', component: GroupsComponent}, 
    { path: 'stagiaires', component: TraineeComponent} 
    ]}, 
    { path: 'home', component: HomeComponent, children: [ 
    { path: '', 
     redirectTo: '/home/tps', 
     pathMatch: 'full'}, 
    { path: 'tps', component: HometpsComponent}, 
    ]}, 
    { path: '**', component: LoginComponent} 
]; 

jede Hilfe zu erkennen ist, danke.

Answer 1

Es scheint, dass mein Routing perfekt funktionierte, das Problem war in meiner Kindkomponente HometpsComponent ngOnInit(), wo ich Daten von localStorage (die leer ist, wenn der Benutzer nicht angemeldet ist oder wenn seine Sitzung abgelaufen ist) gelesen erzeugt einen Fehler und verhindert, dass der Router navigiert.

danke.