在Angular 6中,guard/canActivate守卫只能应用于主路由,而不能直接应用于次级出口。但是可以通过一些修改来实现在次级出口中使用守卫的效果。
一种解决方法是在主路由中使用canActivate守卫,然后在次级出口中通过使用canActivateChild守卫来实现类似的效果。以下是一个代码示例:
首先,在主路由中定义canActivate守卫:
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
@Injectable()
export class MyGuard implements CanActivate {
canActivate() {
// 在这里放置你的验证逻辑
return true; // 或者返回一个Observable 或者Promise
}
}
然后,在主路由中应用canActivate守卫:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyGuard } from './my.guard';
const routes: Routes = [
{
path: '',
canActivate: [MyGuard],
children: [
// 定义次级出口
{
path: 'child',
loadChildren: './child/child.module#ChildModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [MyGuard]
})
export class AppRoutingModule { }
最后,在次级出口中定义canActivateChild守卫:
import { Injectable } from '@angular/core';
import { CanActivateChild } from '@angular/router';
@Injectable()
export class MyChildGuard implements CanActivateChild {
canActivateChild() {
// 在这里放置你的验证逻辑
return true; // 或者返回一个Observable 或者Promise
}
}
并在次级出口的路由模块中应用canActivateChild守卫:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyChildGuard } from './my-child.guard';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: '',
component: ChildComponent,
canActivateChild: [MyChildGuard]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [MyChildGuard]
})
export class ChildRoutingModule { }
通过这种方式,你可以在主路由中使用canActivate守卫,在次级出口中使用canActivateChild守卫来实现类似的效果。