当我尝试输入/ candidates url路径时,应用程序总是重定向到主页。其余路径工作正常。 控制台也不会引发任何错误。
路由模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../components/login/login.component';
import { UnauthorizedComponent } from '../components/unauthorized/unauthorized.component';
import { WelcomeComponent } from '../components/welcome/welcome.component';
import { AdminComponent } from '../components/questionnaire/admin/admin.component';
import { QuestionPageComponent } from '../components/questionnaire/question-page/question-page.component';
import { ThankYouComponent } from '../components/questionnaire/thank-you/thank-you.component';
import { UserGuard } from '../guards/user/user.guard';
import {CandidatesComponent} from '../components/questionnaire/candidates/candidates.component';
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'unauthorized',
component: UnauthorizedComponent
},
{
path: 'home',
component: WelcomeComponent,
canActivate: [UserGuard]
},
{
path: 'candidates',
component: CandidatesComponent,
canActivate: [UserGuard]
},
{
path: 'admin',
component: AdminComponent,
canActivate: [UserGuard]
},
{
path: 'question-page',
component: QuestionPageComponent,
canActivate: [UserGuard]
},
{
path: 'thank-you',
component: ThankYouComponent,
canActivate: [UserGuard]
},
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class RoutingModule { }
应用组件
import { Component, NgZone, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from './services/user/user.service';
import * as firebase from 'firebase/app';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
user;
constructor(
public router: Router,
private userService: UserService,
private zone: NgZone
) {}
ngOnInit() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.user = user;
this.zone.run(() => {
this.router.navigate(['/home']);
});
} else {
this.user = undefined;
this.router.navigate(['/login']);
}
});
}
showUserMenu() {
return !(this.router.isActive('login', true) || this.router.isActive('unauthorized', true));
}
logout() {
this.userService.logout();
}
goTo(route) {
this.router.navigate([route]);
}
}
用户防护
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../../services/user/user.service';
@Injectable()
export class UserGuard implements CanActivate {
constructor(
public router: Router,
private userService: UserService
) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const user = this.userService.getCurrentUser();
const ts4 = user && user.email.endsWith('@ts4-inc.com');
if (ts4) {
return true;
} else if (user) {
this.router.navigateByUrl('unauthorized');
return false;
} else {
this.router.navigateByUrl('login');
return false;
}
}
}
对于此代码,我无法访问路由/候选对象,我只想知道问题出在哪里,它总是重定向到主页。我在做什么错了?