浅谈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 到 JQuery (1)学习小结
Feb 12 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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中实现简单的ACL 完结篇
2011/09/07 PHP
php事务处理实例详解
2014/07/11 PHP
PHP解析RSS的方法
2015/03/05 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery实现的伪分页效果代码
2015/10/29 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
flask session组件的使用示例
2018/12/25 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
django fernet fields字段加密实践详解
2019/08/12 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
枚举与#define宏的区别
2014/04/30 面试题
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
mysql查看表结构的三种方法总结
2022/07/07 MySQL