1

我正在尝试使用 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

用于屏蔽已经登录的用户

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？

4

2 回答 2

1

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

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

于 2020-05-23T08:17:25.480 回答
1

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

 {path: 'roles',  loadChildren: () => import('./roles/roles.module').then(m => m.RolesModule), canLoad: [GuesGuard]},
于 2020-05-23T08:48:06.293 回答