Angular2 之 路由与导航详细介绍(2)

可以在路由配置中添加守卫来进行处理。守卫可以返回一个boolean值,为true时,导航过程继续,为false时,导航被取消,当然这时候也可以被导航到其他页面。也可以返回返回一个Observable<boolean>或Promise<boolean>,并且路由器会等待这个可观察对象被解析为true或false。

路由器支持多种守卫

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

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

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

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

CanLoad来处理异步导航到某特性模块的情况。

使用规则

在分层路由的每个级别上,我们都可以设置多个守卫。 路由器会先按照从最深的子路由由下往上检查的顺序来检查CanDeactivate守护条件。 然后它会按照从上到下的顺序检查CanActivate守卫。 如果任何守卫返回false,其它尚未完成的守卫会被取消,这样整个导航就被取消了。

CanActivate

使用CanActivate来处理导航路由,需要在路由配置中,添加导入AuthGuard类,修改管理路由并通过CanActivate属性来引用AuthGuard。

具体的守卫规则要看AuthGuard类的实现。而AuthGuard 类是需要继承CanActivate 类的:export class AuthGuard implements CanActivate {}

import { AuthGuard } from '../auth-guard.service'; const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], // 重点 children: [ { path: '', children: [ { path: 'crises', component: ManageCrisesComponent }, { path: 'heroes', component: ManageHeroesComponent }, { path: '', component: AdminDashboardComponent } ], } ] } ]; @NgModule({ imports: [ RouterModule.forChild(adminRoutes) ], exports: [ RouterModule ] }) export class AdminRoutingModule {}

CanActivateChild 守卫自路由

就像我们可以通过CanActivate来守卫路由一样,我们也能通过CanActivateChild守卫来保护子路由。CanActivateChild守卫的工作方式和CanActivate守卫很相似,不同之处在于它会在每个子路由被激活之前运行。我们保护了管理特性模块不受未授权访问,也同样可以在特性模块中保护子路由。

这个使用起来比较简单,只需要在需要守卫的子路由的配置上添加即可。而AuthGuard 类是需要继承canActivateChild 类的:export class AuthGuard implements canActivateChild {}

const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], children: [ { // 无组件路由,相当于分组 path: '', canActivateChild: [AuthGuard], // 守卫子路由 children: [ { path: 'crises', component: ManageCrisesComponent }, { path: 'heroes', component: ManageHeroesComponent }, { path: '', component: AdminDashboardComponent } ] } ] } ];

CanDeactivate 处理未保存的更改

在现实世界中,我们得先把用户的改动积累起来。 我们可能不得不进行跨字段的校验,可能要找服务器进行校验,可能得把这些改动保存成一种待定状态,直到用户或者把这些改动作为一组进行确认或撤销所有改动。

当用户要导航到外面时,该怎么处理这些既没有审核通过又没有保存过的改动呢? 我们不能马上离开,不在乎丢失这些改动的风险,那显然是一种糟糕的用户体验。

我们应该暂停,并让用户决定该怎么做。如果用户选择了取消,我们就留下来,并允许更多改动。如果用户选择了确认,那就进行保存。
在保存成功之前,我们还可以继续推迟导航。如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误的上下文环境。

在等待服务器的答复时,我们没法阻塞它 —— 这在浏览器中是不可能的。 我们只能用异步的方式在等待服务器答复之前先停止导航。

我们需要CanDeactivate守卫。

Resolve

主要实现的就是导航前预先加载路由信息。可以做到,当真正需要导航进来这个详情页面时,是不需要再去获取数据的。是提前加载好的。

服务可以实现Resolve守卫接口来同步或异步解析路由数据。

CanLoad - 保护特性模块的加载

前提

异步路由,只要是懒惰加载特征区域。这样做的好处:

可以继续构建特征区,但不再增加初始包大小。

只有在用户请求时才加载特征区。

为那些只访问应用程序某些区域的用户加快加载速度。

路由器用loadChildren属性来映射我们希望惰性加载的捆文件,这里是AdminModule。

const appRoutes: Routes = [ { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', } ];

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyxpxp.html