What is Route Guard

[puddlejumper26]

1 什么是路由守卫？

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

- canActivate

控制是否允许进入路由。canActivate可以指定多个守卫，值是一个数组。

- canActivateChild

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

- canDeactivate

控制是否允许离开路由。

- canLoad

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

例如：

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

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

2 如何创建？

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

属性名 | 接口名

• 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 类。

3 一些实践

3.1 离开时提醒

四种守卫只有一种离开类型 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 的确认对话框来提醒用户是否需要离开，若选择【离开】则跳转至目标路由，反之保留当前路由状态。

3.2 角色受限

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

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

4 Resolve

https://www.cnblogs.com/starof/p/9012193.html http请求数据返回有延迟，导致模版无法立刻显示。

数据返回之前模版上所有需要用插值表达式显示某个controller的值的地方都是空的。用户体验不好。

resolve解决办法：在进入路由之前去服务器读数据，把需要的数据都读好以后，带着这些数据进到路由里，立刻就把数据显示出来。

实例：

在进入商品信息路由之前，准备好商品信息再进入路由。 拿不到信息，或者拿信息出问题了，直接跳到错误信息页面，或者弹出提示，就不再进入目标路由。

5 总结

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

Resource

[1] https://segmentfault.com/a/1190000010851032 [2] https://www.cnblogs.com/starof/p/9012193.html