何时以及如何在使用 Angular TS 的延迟加载路由中使用守卫答案

【问题标题】：When and How to use Guards in Lazy Loading routes with Angular TS何时以及如何在使用 Angular TS 的延迟加载路由中使用守卫
【发布时间】：2020-09-10 02:44:04
【问题描述】：

我正在尝试使用 Angular 9 构建一个应用程序并在我的

app-routing.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' },
];

guest-guard.ts

用于屏蔽已经登录的用户

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;
    }
}

auth-guard.ts

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

export class AuthGuard 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('/');
        return false;
        }
        return true;
    }
    canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
        const userLoggedIn = this.auth.isLoggedIn();
        if(!userLoggedIn){
        this.router.navigateByUrl('/');
        return false;
        }
        return true;
    }
}

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

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

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

什么时候应该使用canLoad？

【问题讨论】：

你也试过这个吗？ {path:'', pathMatch: 'full', loadChildren: () => import('./user/user.module').then(m => m.UserModule)}

标签： angular angular-routing angular-lazyloading

【解决方案1】：

对于未登录的用户，AuthGuard 应该导航到login 页面或可供公众访问的地方。 AuthGuard 应该只保护登录用户可用的内部路由。此外，对于 loogedin 用户，您可以进行角色设置，并使用CanLoad 防止在示例管理模块中加载一些惰性模块，仅允许管理员角色等。在管理模块内部，您可以使用“canActivate”访问不同的功能根据其他一些设置或角色。

您也可以对其他页面使用守卫，但您应该有一些方法来区分一个用户和另一个用户，例如，您可以通过在本地存储中保存一些标记来标记匿名用户，这样您就可以看到谁第一次访问等等。

【讨论】：

【解决方案2】：

Can Load 用于检查延迟加载的模块是否应该允许登录。例如：-

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

【讨论】：