Angular路由守卫

引言

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

当但愿用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，若是在Angular中应该怎么作呢？

其实Angular路由守卫属性能够帮咱们作更多有意义的事，并且很是简单。

什么是路由守卫？

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

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?: 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 的确认对话框来提醒用户是否须要离开，若选择【离开】则跳转至目标路由，反之保留当前路由状态。

角色受限

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

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

总结

路由守卫对于权限控制很是便利，固然其粒度固然只能在页面层级。假若须要对按钮粒度也只能利用指令的方式，而两者的结合能够极大的改善权限控制埋点的代码量。

Happy coding!