Angular路由守卫

Stella981
• 阅读 837

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

当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在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?: 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 的确认对话框来提醒用户是否需要离开,若选择【离开】则跳转至目标路由,反之保留当前路由状态。

角色受限

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

此时 canActivatecanLoad 就有用了。假定管理员角色才能加载管理模块下所有管理功能以及某个管理页面,基于接口多继承的特性,可以同时继承这两个接口。

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

总结

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

https://segmentfault.com/a/1190000010851032

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
海军 海军
3年前
Vue | 路由守卫面试常考
前言最近在整理基础,欢迎掘友们一起交流学习,关注公众号<ahref"https://z3.ax1x.com/2021/03/27/6zmqSI.jpg"前端自学社区</a<br/结尾有彩蛋哦!🎉🎉🎉VueRouter路由守卫导图目录1.路由守卫分类2.全局路由守卫3.单个路由守卫
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
vue 路由导航白话全解析
这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Frouter.vuejs.org%2Fzh%2Fguide%2Fadvanced%2Fnavigationguards.html)路由守卫路由守卫说白了就是路由拦截,在
Souleigh ✨ Souleigh ✨
3年前
10个略骚的 Vue 开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:exportdefaultmethods:getParamsId()returnthis.$route.params.id在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只
海军 海军
3年前
Vue | 路由守卫面试常考
前言最近在整理基础,欢迎一起交流学习<br/结尾有彩蛋哦!🎉🎉🎉VueRouter路由守卫导图目录1.路由守卫分类2.全局路由守卫3.单个路由守卫4.组件路由守卫5.路由守卫执行的完整过程<hr/路由守卫分类全局路由单个路由独享组件内部
Stella981 Stella981
3年前
Angular系列文章之angular路由
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!于是,一个基于ngRoute开发的第
Stella981 Stella981
3年前
Angular最新教程
Angular之所以被称为单页面应用,就是因为我们在改变浏览器URL的时候, 不触发刷新当前页面的行为,我们看到的所有的界面,其实是在一个主URL中。 这个功能(功能?现象?表现?随便吧!)就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。!(https://oscimg.oschina.net/oscnet/4e0e1
Stella981 Stella981
3年前
Angular路由参数传递
一、路由时传递参数的方式1、在查询参数中传递数据,如//前台页面<arouterLink"/product"queryParams"{id:1}"商品详情</a//后台页面获取参数exportclassProductComponentimplementsOnInit{