浅谈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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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
关于文本留言本的分页代码
2006/10/09 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
初识ThinkPHP控制器
2016/04/07 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
深入理解Python中的内置常量
2017/05/20 Python
快速入门python学习笔记
2017/12/06 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python有参函数使用代码实例
2020/01/06 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
一些PHP的面试题
2015/05/06 面试题
小学家长会邀请函
2014/01/23 职场文书
节约能源标语
2014/06/17 职场文书
董事会决议范本
2015/07/01 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
MySQL分布式恢复进阶
2022/07/23 MySQL