Angular 2路由器導航到url，但仍然呈現源組件

我想創建一個與角2的身份驗證系統，我用angular2-jwt和一切工作正常，但我遇到的問題是當未經身份驗證的用戶嘗試訪問受限制的路由，以處理這個問題，我檢查用戶是否在ngOnInit（）函數中進行身份驗證，如果沒有，用戶應該被重定向到登錄頁面，在我的情況下，url更改，但它仍然呈現acced組件模板，這裏是我的代碼：Angular 2路由器導航到url，但仍然呈現源組件

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

這裏是它的外觀：

你可以注意到沒有數據。

我們討厭的事情是，在另一個組件（AdminComponent）中的相同代碼工作正常。

這裏是我的app.routes.ts文件：

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} 
];

任何幫助將不勝感激，謝謝。

來源

2017-01-22 yassine el khanboubi

你想要去哪個路徑？我沒有看到網址變化的截圖 – echonax

感謝您的重播，它已經改變，我輸入** http：// localhost：4200/home **將url更改爲** http：// localhost：4200 * *但加載的模板是HomeComponent的模板，我只是做了一些調試，我發現路由器拋出錯誤：**無法激活一個已經激活的插座** –

看來我的路由工作正常，問題出在我的子組件HometpsComponent的ngOnInit（），我從localStorage讀取數據（如果用戶未登錄或者他的會話已過期，則爲空）哪個產生一個錯誤並阻止路由器導航。

謝謝。

來源

2017-01-22 22:04:03

Angular 2路由器導航到url，但仍然呈現源組件

回答

相關問題