浅谈角路由守卫

　　

<强>引言

　　

在企业应用中权限,复杂页多路由数据处理,进入与离开路由数据处理这些是非常常见的需求。

　　

当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在角中应该怎么做呢?

　　

其实角路由守卫属性可以帮我们做更多有意义的事,而且非常简单。

　　

<强>什么是路由守卫?

　　

角的<代码> 路路线由参数中除了熟悉的<代码>路径> <代码>组件外,还包括四种是否允许路由激活与离开的属性。

　　

<强> canActivate

　　

控制是否允许进入路由。

　　

<强> canActivateChild

　　

等同canActivate,只不过针对是所有子路由。

　　

<强> canDeactivate

　　

控制是否允许离开路由。

　　

<强> canLoad

　　

控制是否允许延迟加载整个模块。

　　

例如:
　　

　　

代码如下:
　　{路径:“逻辑”,loadChildren:“。/逻辑/逻辑。模块# LogicsModule ', canLoad: [AuthGuard]}
　　
　　

　　

这四个属性非常好理解,而且作用各自不同,然后当进入与离开能够有效控制权时,对于前面我提到的若干问题,就可以非常好的处理。

　　

<>强如何创建?

　　

四个属性虽然名称不同,但其基本的使用方式非常相近。四种不同守卫方式有者四个不同的接口与之相对应。

　　

　　 　　 　　 　　属性名 　　接口名 　　 　　 　　 　　 　　canActivate 　　CanActivate 　　 　　 　　canActivateChild 　　CanActivateChild 　　 　　 　　canDeactivate 　　CanDeactivate 　　 　　 　　canLoad 　　CanLoad 　　 　　 　　 　　

　　

<代码> canDeactivate> CanActivate 守卫类。

　　 　　 　　@Injectable () 　　出口类CanAdminProvide实现CanActivate { 　　 　　构造函数(私人userSrv: UserService私人味精:NzMessageService) {} 　　 　　canActivate ( 　　路线:ActivatedRouteSnapshot, 　　状态:RouterStateSnapshot):布尔| Observable| Promise{ 　　返回新观测((观察者)=比;{//拥有“admin”角色 　　如果(this.userSrv.hasRole('管理')){ 　　observer.next(真正的); 　　observer.complete (); 　　返回; 　　} 　　 　　this.msg.error(“授权不足”); 　　observer.next(假); 　　observer.complete (); 　　}); 　　} 　　 　　} 　　 　　之前 　　 　　

每种接口要都需要相应的实现某个方法,就上而论,继承CanActivate并实现一个叫CanActivate的方法,且返回一个布尔类型的值。

　　

四种类型守卫接口都返回一个布尔类型值,其实从这四种参数的名称可以开头就不然理解。

　　

最后,把它运用到相应的路由上即可,例如:

　　

代码如下:
　　{路径:“admin”,组件:GuardAdminComponent canActivate: [CanAdminProvide]}
　　
　　

　　

当然,别忘记注册CanAdminProvide类。

　　

<强>一些实践

　　

<强>离开时提醒

　　

四种守卫只有一种离开类型<代码> canDeactivate> 　　 　　 　　@Injectable () 　　出口类CanLeaveProvide实现CanDeactivate{ 　　构造函数(私人confirmSrv: NzModalService) {} 　　 　　canDeactivate ( 　　组件:GuardComponent, 　　currentRoute: ActivatedRouteSnapshot, 　　现状后:RouterStateSnapshot, 　　nextState& # 63;: RouterStateSnapshot):布尔| Observable| Promise{ 　　返回新观测((观察者)=比;{ 　　this.confirmSrv.confirm ({ 　　标题:“确认要离开吗?’, 　　内容:“你已经填写了部分表单离开会放弃已经填写的内容。’, 　　okText:“离开”, 　　cancelText:“取消”,>//允许 　　observer.next(真正的);//或拒绝//observer.next(假); 　　 　　observer.complete (); 　　之前 　　 　　

来处理可观测的结果,就完成了整个流程。倘若,用户按浏览器后退或路由至其他页面时,会先收到一个提醒。

　　

上面使用的ng-zorro-antd的确认对话框来提醒用户是否需要离开,若选择【离开】则跳转至目标路,由反之保留当前路由状态。

　　

浅谈角路由守卫”> <br/> 　　<h2 class=浅谈角路由守卫