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}
];
任何帮助将不胜感激,谢谢。
答
看来我的路由工作正常,问题出在我的子组件HometpsComponent的ngOnInit(),我从localStorage读取数据(如果用户未登录或者他的会话已过期,则为空)哪个产生一个错误并阻止路由器导航。
谢谢。
你想要去哪个路径?我没有看到网址变化的截图 – echonax
感谢您的重播,它已经改变,我输入** http:// localhost:4200/home **将url更改为** http:// localhost:4200 * *但加载的模板是HomeComponent的模板,我只是做了一些调试,我发现路由器抛出错误:**无法激活一个已经激活的插座** –