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，但仍然呈现源组件

回答

相关问题