Angular 角度延迟加载条件路由

我正在构建一个应用程序，在应用程序开始时对用户进行身份验证。根据用户是否经过身份验证，我想延迟加载不同的angular模块

在这方面：

app.component.ts

@组件({
模板：`
`
})
导出类AppComponent实现OnInit{
readonly IsAuthentication$=this.authFacade.IsAuthentication$；
构造函数（私有只读authFacade:authFacade）{}
ngOnInit（）：void{
this.authFacade.authenticate（）；
}
}

这就是我启动身份验证逻辑的地方，该逻辑在不确定的时间点完成。如果需要的话，我可以选择在完成后加入一个可观察的

身份验证完成后，我将路由器出口加载到DOM

app-routing.module.ts

const routes:routes=[
//延迟加载，当身份验证成功时
{
路径：“”，
路径匹配：“已满”，
loadChildren:（）=>import（'@myapplication/secret'）。然后（m=>m.SecretModule）
},
//延迟加载，当身份验证失败时
{
路径：“家”，
loadChildren:（）=>import（'@my application/home'）。然后（m=>m.HomeModule）
},
];
@NGD模块({
导入：[RouterModule.forRoot（路由）]，
导出：[路由模块]
})
导出类AppRoutingModule{}

这些是我的顶级路线。现在，我想要实现的是，当用户通过身份验证后，延迟加载

SecretModule

并显示其内容

另一方面，当身份验证失败时，我希望将用户导航到主页并延迟加载

HomeModule

现在，我看到一个关于<代码>空白模块>代码>的空白路由的问题。我可以想到的一个解决方法是在身份验证完成后在其他地方手动实现此条件路由逻辑，而不是采用“角度方式”

您认为实现上述逻辑的最佳方法是什么

---

（顺便说一句，我使用的是Angular 11）

首先，您可以添加两个防护，以便未经授权的用户无法加载和访问您的机密模块：

auth.guard.ts

@可注入({
providedIn:'根'
})
导出类AuthGuard实现了CanActivate、CanLoad{
建造师(
专用路由器：路由器，
私有authService:authService，//我知道你写了某种authService
) {}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：Promise | boolean | UrlTree{
log（'尝试激活管理路由'）；
返回此值。checkAccess（）；
}
canLoad（路由：路由，段：URLSEMENT[]）：承诺|布尔| UrlTree{
log（'尝试加载管理路由'）；
返回此值。checkAccess（）；
}
私有checkAccess（）：承诺{
返回新承诺（异步（解析）=>{
//如果用户已通过身份验证，请在此处进行检查
const isLoggedIn=wait this.authService.isLoggedIn（）；
//若用户未通过身份验证，他将被重定向到主页
解析（isLoggedIn？true：this.router.createUrlTree（['home']）；
});
}
}

然后在你的秘密路线上使用你的警卫：

const routes:routes=[
//延迟加载，当身份验证成功时
{
路径：“”，
路径匹配：“已满”，
loadChildren:（）=>import（'@my application/secret'）。然后（m=>m.SecretModule），
canLoad:[AuthGuard]，
canActivate:[AuthGuard]，
},
//延迟加载，当身份验证失败时
{
路径：“家”，
loadChildren:（）=>import（'@my application/home'）。然后（m=>m.HomeModule）
},
];

你可以在文档中阅读更多的警惕

---

首先，您可以添加两个防护，以便未经授权的用户无法加载和访问您的保密模块：

auth.guard.ts

@可注入({
providedIn:'根'
})
导出类AuthGuard实现了CanActivate、CanLoad{
建造师(
专用路由器：路由器，
私有authService:authService，//我知道你写了某种authService
) {}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：Promise | boolean | UrlTree{
log（'尝试激活管理路由'）；
返回此值。checkAccess（）；
}
canLoad（路由：路由，段：URLSEMENT[]）：承诺|布尔| UrlTree{
log（'尝试加载管理路由'）；
返回此值。checkAccess（）；
}
私有checkAccess（）：承诺{
返回新承诺（异步（解析）=>{
//如果用户已通过身份验证，请在此处进行检查
const isLoggedIn=wait this.authService.isLoggedIn（）；
//若用户未通过身份验证，他将被重定向到主页
解析（isLoggedIn？true：this.router.createUrlTree（['home']）；
});
}
}

然后在你的秘密路线上使用你的警卫：

const routes:routes=[
//延迟加载，当身份验证成功时
{
路径：“”，
路径匹配：“已满”，
loadChildren:（）=>import（'@my application/secret'）。然后（m=>m.SecretModule），
canLoad:[AuthGuard]，
canActivate:[AuthGuard]，
},
//延迟加载，当身份验证失败时
{
路径：“家”，
loadChildren:（）=>import（'@my application/home'）。然后（m=>m.HomeModule）
},
];

你可以在文档中阅读更多的警惕

---

我认为您应该实施CanActive来保护特定的路由。我认为您应该实施CanActive来保护特定的路由。谢谢，这确实帮助了我。我一开始并没有想到要用防护来解决这个问题。但是当已经有一个

CanLoad

防护的时候，添加一个

CanActivate

防护有什么区别吗？

CanLoad

是否足以限制访问？（当模块未加载时，无法访问）不，不，当您仅使用

CanLoad

guard，并且用户注销时，他仍然可以

通过导航back激活

秘密路径。谢谢，这真的帮了我大忙。我不知道