Angular 何时以及如何在具有角度TS的延迟加载路径中使用防护装置

我正在尝试使用Angular 9和我的

应用程序路由.module.ts

  const routes: Routes = [
{
    path: '', canActivate:[GuestGuard], component: BlankComponent,  children:[
        {path:'', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}
    ],


},
{
    path: '', canActivate:[AuthGuard], component: UserComponent,  children: [
    {path: 'dashboard', component: DashboardComponent},
    {path:'', children:[
    {path: 'roles',  loadChildren: () => import('./roles/roles.module').then(m => m.RolesModule), },  


}
    ]
},
    { path: '**', redirectTo: '', pathMatch: 'full' },
];

宾客守卫。ts

  const routes: Routes = [
{
    path: '', canActivate:[GuestGuard], component: BlankComponent,  children:[
        {path:'', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}
    ],


},
{
    path: '', canActivate:[AuthGuard], component: UserComponent,  children: [
    {path: 'dashboard', component: DashboardComponent},
    {path:'', children:[
    {path: 'roles',  loadChildren: () => import('./roles/roles.module').then(m => m.RolesModule), },  


}
    ]
},
    { path: '**', redirectTo: '', pathMatch: 'full' },
];

用于阻止已登录的用户

export class GuestGuard implements CanActivate, CanLoad {
    constructor(private auth:Auth, private router:Router){}
    canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        const userLoggedIn = this.auth.isLoggedIn();
        if(userLoggedIn){
        this.router.navigateByUrl('dashboard');
        return false;
        }
        return true;
    }
    canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
        const userLoggedIn = this.auth.isLoggedIn();
        if(userLoggedIn){
        this.router.navigateByUrl('dashboard');
        return false;
        }
        return true;
    }
}

导出类GuestGuard实现CanActivate、CanLoad{
构造函数（私有身份验证：身份验证，私有路由器：路由器）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔| UrlTree{
const userLoggedIn=this.auth.isLoggedIn（）；
if（userLoggedIn）{
这个.router.navigateByUrl（'dashboard'）；
返回false；
}
返回true；
}
罐头(
路线:路线,，
段：URLSEMENT[]：可观察的|承诺|布尔值{
const userLoggedIn=this.auth.isLoggedIn（）；
if（userLoggedIn）{
这个.router.navigateByUrl（'dashboard'）；
返回false；
}
返回true；
}
}

auth guard.ts

  const routes: Routes = [
{
    path: '', canActivate:[GuestGuard], component: BlankComponent,  children:[
        {path:'', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}
    ],


},
{
    path: '', canActivate:[AuthGuard], component: UserComponent,  children: [
    {path: 'dashboard', component: DashboardComponent},
    {path:'', children:[
    {path: 'roles',  loadChildren: () => import('./roles/roles.module').then(m => m.RolesModule), },  


}
    ]
},
    { path: '**', redirectTo: '', pathMatch: 'full' },
];

允许访问登录的用户（与来宾相反）

export类AuthGuard实现CanActivate、CanLoad{
构造函数（私有身份验证：身份验证，私有路由器：路由器）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔| UrlTree{
const userLoggedIn=this.auth.isLoggedIn（）；
如果（！userLoggedIn）{
this.router.navigateByUrl（'/'）；
返回false；
}
返回true；
}
罐头(
路线:路线,，
段：URLSEMENT[]：可观察的|承诺|布尔值{
const userLoggedIn=this.auth.isLoggedIn（）；
如果（！userLoggedIn）{
this.router.navigateByUrl（'/'）；
返回false；
}
返回true；
}
}

上述代码工作正常。但是当我在来宾路径上使用canLoad时，我得到

Throttling navigation to prevent the browser from hanging. See <URL>.

限制导航以防止浏览器挂起。看见

对于loggedin用户路径，不执行canLoad函数（使用console.log进行测试）

---

什么时候应该使用canLoad？

对于非loggedin用户，AuthGuard应该导航到

登录

页面或可供公众访问的地方。AuthGuard应仅保护登录用户可用的内部路由。 此外，对于loogedin用户，您可以进行角色设置，并使用

CanLoad

防止在示例中加载一些惰性模块。管理模块只能用于管理角色等。在管理模块内部，您可以使用“canActivate”访问相应于某些其他设置或角色的不同功能

---

您也可以为其他页面使用防护，但您应该有一些方法来区分一个用户和另一个用户，例如，您可以通过在本地存储中保存一些标记来标记匿名用户，以便您可以查看谁获得了首次访问权等。

can Load用于检查延迟加载的模块是否允许他们登录。例如：

 {path: 'roles',  loadChildren: () => import('./roles/roles.module').then(m => m.RolesModule), canLoad: [GuesGuard]}, 

---

你也试过这个吗<代码>{path:''，pathMatch:'full'，loadChildren:（）=>import（'./user/user.module'）。然后（m=>m.UserModule）}