时间:2021-05-18
引言
在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。
当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢?
其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单。
什么是路由守卫?
Angular 的 Route 路由参数中除了熟悉的 path、component 外,还包括四种是否允许路由激活与离开的属性。
canActivate
控制是否允许进入路由。
canActivateChild
等同 canActivate,只不过针对是所有子路由。
canDeactivate
控制是否允许离开路由。
canLoad
控制是否允许延迟加载整个模块。
例如:
复制代码 代码如下:
{ path: 'logics', loadChildren: './logics/logics.module#LogicsModule', canLoad: [ AuthGuard ] }
这四个属性非常好理解,而且作用各自不同。然后当进入与离开能够有效控制权时,对于前面我提到的若干问题,就可以非常好的处理。
如何创建?
四个属性虽然名称不同,但其基本的使用方式非常相近。四种不同守卫方式有者四个不同的接口与之相对应。
属性名 接口名 canActivate CanActivate canActivateChild CanActivateChild canDeactivate CanDeactivate<TComponent> canLoad CanLoad
canDeactivate 需要指明具体的组件类名以外,其他接口只是将首字母大写而已。假定需要一个某个角色才能访问某些路由,就需要一个 CanActivate 守卫类。
@Injectable()export class CanAdminProvide implements CanActivate { constructor(private userSrv: UserService, private msg: NzMessageService) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> { return new Observable((observer) => { // 拥有 `admin` 角色 if (this.userSrv.hasRole('admin')) { observer.next(true); observer.complete(); return; } this.msg.error('授权不足'); observer.next(false); observer.complete(); }); }}每种接口要都需要相应的实现某个方法,就上而论,继承 CanActivate 并实现一个叫 canActivate 的方法;且返回一个布尔类型的值。
四种类型守卫接口都返回一个布尔类型值,其实从这四种参数的名称 can 开头就不然理解。
最后,把它运用到相应的路由上即可,例如:
复制代码 代码如下:
{ path: 'admin', component: GuardAdminComponent, canActivate: [ CanAdminProvide ] }
当然,别忘记注册 CanAdminProvide 类。
一些实践
离开时提醒
四种守卫只有一种离开类型 canDeactivate,因此:
@Injectable()export class CanLeaveProvide implements CanDeactivate<GuardComponent> { constructor (private confirmSrv: NzModalService) {} canDeactivate( component: GuardComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> { return new Observable((observer) => { this.confirmSrv.confirm({ title: '确认要离开吗?', content: '你已经填写了部分表单离开会放弃已经填写的内容。', okText: '离开', cancelText: '取消', onOk: () => { observer.next(true); observer.complete(); }, onCancel: () => { observer.next(false); observer.complete(); } }); }); }}这里返回的是一个 Observable 类型,意味者,在方法体内可以做任何事,只需要在结果中使用:
// 允许observer.next(true); // 或拒绝// observer.next(false);observer.complete();来处理 Observable 的结果,就完成了整个流程。倘若,用户按浏览器后退或路由至其他页面时,会先收到一个提醒。
上面使用的 ng-zorro-antd 的确认对话框来提醒用户是否需要离开,若选择【离开】则跳转至目标路由,反之保留当前路由状态。
角色受限
这是再正常不过的功能,若用户进入一个未授权的路由时,甚至是某个迟延加载模块下所有路由;若用户无权限时,如何提醒用户。
此时 canActivate、canLoad 就有用了。假定管理员角色才能加载管理模块下所有管理功能以及某个管理页面,基于接口多继承的特性,可以同时继承这两个接口。
@Injectable()export class CanAuthProvide implements CanActivate, CanLoad { constructor(private userSrv: UserService, private msg: NzMessageService) {} check(): Observable<boolean> { return new Observable((observer) => { if (this.userSrv.isLogin) { observer.next(true); observer.complete(); return; } this.msg.error('权限不足'); observer.next(false); observer.complete(); }); } canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> { return this.check(); } canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> { return this.check(); }}因此,一个类中具有两种不同守卫的能力,更对于代码组织也更优雅。同样,需要运用到相应的路由当中。
{ path: 'auth', component: GuardAuthComponent, canActivate: [ CanAuthProvide ] },{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [ CanAuthProvide ] }此后,若一个普通员工账号要想进入(哪怕浏览器地址栏录入)未授权的路由 /auth 会提示 权限不足 的字样。
总结
路由守卫对于权限控制非常便利,当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式,而二者的结合可以极大的改善权限控制埋点的代码量。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
什么是beforeEach?beforeEach是一个vue-router的路由导航钩子,一般我用它做路由守卫。什么是路由守卫?路由跳转前做一些验证,比如登录验
最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记官方文档导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截
导航守卫导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的,单个路由独享的,或者组件级的。(记住参数或查询的改变并不会触发进入/
本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考,具体如下:在路由文件需要守卫的path后面加上meta{path:'/home',compone
路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)在官方定义是这