相思资源网 Design By www.200059.com

引言

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

当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在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<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"htmlcode">
// 允许
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路由守卫

总结

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

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

标签:
angular,路由守卫

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“浅谈Angular路由守卫”

暂无浅谈Angular路由守卫的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?