angular 路由守卫

栏目: 编程语言 · AngularJS · 发布时间: 4年前

路由守卫基础

路由守卫作用:
    用于在导航到目标组件之前进行验证, 符合条件才会导航到目标组件。
路由检查的顺序:
    路由器会先按照从最深的子路由由下往上检查的顺序来检查 CanDeactivate() 和 CanActivateChild() 守卫。
  然后它会按照从上到下的顺序检查 CanActivate() 守卫。 如果特性模块是异步加载的,在加载它之前还会检查 CanLoad() 守卫。
  如果任何一个守卫返回 false,其它尚未完成的守卫会被取消,整个导航就被取消。
  
惰性加载:
    1. 只在用户请求时才加载。惰性加载和重新配置工作只会发生一次,也就是在该路由首次被请求时。在后续的请求中,该模块和路由都是立即可用的。
    2. 必须在启动时加载的模块,其他模块都应该惰性加载。
预加载:
    1. 根据预加载策略,在每次成功的导航后,路由器会在自己的配置中查找尚未加载并且可以预加载的模块进行加载。
    2. 当前不需要但是随后马上就需要的模块应该预加载

(守卫接口)Guard interfaces

  1. CanActivate 和 CanActivateChild

    CanActivate:处理导航到某路由的情况。

    CanActivateChild:处理导航到某子路由的情况。

    使用方法:

    const adminRoutes: Routes = [
         {
           path: '',
           component: AdminComponent,
           canActivate: [AuthGuard],//AuthGuard验证通过,才允许访问Admin页面
           children: [
             {
               path: '',
               canActivateChild: [AuthGuard],//AuthGuard验证通过,才允许访问Admin页面的子页面
               children: [
                 { path: 'crises', component: ManageCrisesComponent },
                 { path: 'heroes', component: ManageHeroesComponent },
                 { path: '', component: AdminDashboardComponent }
               ]
             }
           ]
         }
       ];

    应用示例:要求认证

    angular 路由守卫

    工作流程:

    angular 路由守卫

  2. CanDeactivate 和 Resolve

    CanDeactivate:处理从当前路由离开的情况。

    Resolve:在路由激活之前获取路由数据

    使用方法:

    const crisisCenterRoutes: Routes = [
         {
           path: '',
           component: CrisisCenterComponent,
           children: [
             {
               path: '',
               component: CrisisListComponent,
               children: [
                 {
                   path: ':id',
                   component: CrisisDetailComponent,
                   canDeactivate: [CanDeactivateGuard],  // CanDeactivate:处理从CrisisDetailComponent路由离开的情况
                   resolve: { //resolve:当所有必要数据都已经拿到之后,预先加载CrisisDetailComponent的路由数据
                     crisis: CrisisDetailResolverService 
                   }
                 },
                 {
                   path: '',
                   component: CrisisCenterHomeComponent
                 }
               ]
             }
           ]
         }
       ];

    应用示例:用户尝试不保存或撤销更改就导航到外面。

    angular 路由守卫

    工作流程:

    angular 路由守卫

  3. CanLoad

    CanLoad:处理异步导航到某特性模块的情况。
       使用方法:
           const appRoutes: Routes = [
             {
               path: 'compose',
               component: ComposeMessageComponent,
               outlet: 'popup'
             },
             {
               path: 'admin',
               loadChildren: './admin/admin.module#AdminModule',
               canLoad: [AuthGuard]//保护对特性模块的未授权加载,只有在用户已登录的情况下才加载 AdminModule
             },
             {
               path: 'crisis-center',
               loadChildren: './crisis-center/crisis-center.module#CrisisCenterModule',
               data: { preload: true }
             },
             { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
             { path: '**', component: PageNotFoundComponent }
           ];

以上所述就是小编给大家介绍的《angular 路由守卫》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计数组合学(卷2)

计数组合学(卷2)

斯坦利 / 机械工业出版社 / 2004-11-15 / 59.00元

本书介绍了生成函数组合、树、代数生成函数、D有限生成函数、非交换生成函数和对称函数。关于对称函数的论述只适用于研究生的入门课程并着重于组合学方面,尤其是Robinson-Schensted-Knuth算法,还讨论了对称函数与表示论之间的联系。附录(由Sergey Fomin编写)中更深入地讨论了对称函数理论,包括jeu de taquin和Littlewood-richardson规则。另外,书中......一起来看看 《计数组合学(卷2)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具