浅谈Angular路由守卫


Posted in Javascript onAugust 26, 2017

引言

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

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

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

什么是路由守卫?

Angular 的 Route 路由参数中除了熟悉的 pathcomponent 外,还包括四种是否允许路由激活与离开的属性。

canActivate

控制是否允许进入路由。

canActivateChild

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

canDeactivate

控制是否允许离开路由。

canLoad

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

例如:

{ path: 'logics', loadChildren: './logics/logics.module#LogicsModule', canLoad: [ AuthGuard ] }

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

如何创建?

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

属性名 接口名
canActivate CanActivate
canActivateChild CanActivateChild
canDeactivate CanDeactivate
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 的确认对话框来提醒用户是否需要离开,若选择【离开】则跳转至目标路由,反之保留当前路由状态。

浅谈Angular路由守卫

角色受限

这是再正常不过的功能,若用户进入一个未授权的路由时,甚至是某个迟延加载模块下所有路由;若用户无权限时,如何提醒用户。

此时 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 会提示 权限不足 的字样。

浅谈Angular路由守卫

总结

路由守卫对于权限控制非常便利,当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式,而二者的结合可以极大的改善权限控制埋点的代码量。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
js实现飞机大战游戏
Aug 26 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
get  post jsonp三种数据交互形式实例详解
Aug 25 #Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 #Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 #Javascript
AngularJS select设置默认值的实现方法
Aug 25 #Javascript
You might like
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
js中string转int把String类型转化成int类型
2014/08/13 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
Python API 自动化实战详解(纯代码)
2019/06/11 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
PyTorch预训练的实现
2019/09/18 Python
Python函数参数分类原理详解
2020/05/28 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
如何保障Web服务器安全
2014/05/05 面试题
园长自我鉴定
2013/10/06 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
实习教师自我鉴定
2013/12/09 职场文书
大型晚会策划方案
2014/02/06 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
企业指导教师评语
2014/04/28 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
2014年工人工作总结
2014/11/25 职场文书
家长对孩子的寄语
2015/02/26 职场文书
公司欠款证明
2015/06/24 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python