浅谈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 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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 什么是PEAR?
2009/03/19 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
详解Python with/as使用说明
2018/12/13 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
思想品德自我鉴定
2013/10/12 职场文书
2015年招生工作总结
2015/05/04 职场文书
秋菊打官司观后感
2015/06/03 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Python实现日志实时监测的示例详解
2022/04/06 Python