Angular8路由守卫原理和使用方法
路由守卫
守卫,顾名思义,必须满足一定的条件得到许可方可通行,否则拒绝访问或者重定向。angular中路由守卫可以借此处理一些权限问题,通常应用中存储了用户登录和用户权限信息,遇到路由导航时会进行验证是否可以跳转。
4种守卫类型
按照触发顺序依次为:canload(加载)、canactivate(进入)、canactivatechild(进入子路由)和candeactivate(离开)。
一个所有守卫都是通过的守卫类:
import { injectable } from '@angular/core'; import { canactivate, router, activatedroutesnapshot, routerstatesnapshot, canactivatechild, canload, candeactivate } from '@angular/router'; import { route } from '@angular/compiler/src/core'; import { newscomponent } from '../component/news/news.component'; @injectable({ providedin: 'root' }) export class authguard implements canactivate, canactivatechild, canload, candeactivate<any> { constructor( private router: router ) { } canactivate(route: activatedroutesnapshot, state: routerstatesnapshot): boolean { // 权限控制逻辑如 是否登录/拥有访问权限 console.log('canactivate'); return true; } candeactivate( component: newscomponent, currentroute: activatedroutesnapshot, currentstate: routerstatesnapshot, nextstate: routerstatesnapshot) { console.log('candeactivate'); return true; } canactivatechild() { // 返回false则导航将失败/取消 // 也可以写入具体的业务逻辑 console.log('canactivatechild'); return true; } canload(route: route) { // 是否可以加载路由 console.log('canload'); return true; } }
app-routing.module.ts
import { ngmodule } from '@angular/core'; import { routes, routermodule } from '@angular/router'; import { errorcomponent } from './error/error.component'; import { authguard } from './core/auth-guard'; const routes: routes = [ // 一般情况很少需要同时写多个守卫,如果有也是分开几个文件(针对复杂场景,否则一般使用canactivated足够) { path: '', canload: [authguard], canactivate: [authguard], canactivatechild: [ authguard ], candeactivate: [authguard], loadchildren: () => import('./pages/pages.module').then(m => m.pagesmodule) }, { path: 'error', component: errorcomponent, data: { title: '参数错误或者地址不存在' } }, { path: '**', redirectto: 'error', pathmatch: 'full' } ]; @ngmodule({ imports: [routermodule.forroot(routes)], exports: [routermodule] }) export class approutingmodule { }
使用场景分析
1.canload
默认值为true,表明路由是否可以被加载,一般不会认为控制这个守卫逻辑,99.99%情况下,默认所有app模块下路由均允许canload
2.canactivate
是否允许进入该路由,此场景多为权限限制的情况下,比如客户未登录的情况下查询某些资料页面,在此方法中去判断客户是否登陆,如未登录则强制导航到登陆页或者提示无权限,即将返回等信息提示。
3.canactivatechild
是否可以导航子路由,同一个路由不会同时设置canactivate为true,canactivatechild为false的情况,此外,这个使用场景很苛刻,尤其是懒加载路由模式下,暂时未使用到设置为false的场景。
4.candeactivate
路由离开的时候进行触发的守卫,使用场景比较经典,通常是某些页面比如表单页面填写的内容需要保存,客户突然跳转其它页面或者浏览器点击后退等改变地址的操作,可以在守卫中增加弹窗提示用户正在试图离开当前页面,数据还未保存 等提示。
场景模拟
登录判断
前期准备:login组件;配置login路由
因为login是独立一个页面,所以app.component.html应该只会剩余一个路由导航
<!-- ng-zorro --> <router-outlet></router-outlet>
取而代之的是pages.component.html页面中要加入header和footer部分变为如下:
<app-header></app-header> <div nz-row class="main"> <div nz-col nzspan="24"> <router-outlet></router-outlet> </div> </div> <app-footer></app-footer>
app-routing.module.ts 中路由配置2种模式分析:
// 非懒加载模式 import { ngmodule } from '@angular/core'; import { routes, routermodule } from '@angular/router'; import { errorcomponent } from './error/error.component'; import { authguard } from './core/auth-guard'; import { logincomponent } from './component/login/login.component'; import { pagescomponent } from './pages/pages.component'; import { indexcomponent } from './component/index/index.component'; const routes: routes = [ // 一般情况很少需要同时写多个守卫,如果有也是分开几个文件(针对复杂场景,否则一般使用canactivated足够) { path: '', canload: [authguard], canactivate: [authguard], canactivatechild: [ authguard ], candeactivate: [authguard], component: pagescomponent, children: [ { path: 'index', component: indexcomponent } // ... ] // loadchildren: () => import('./pages/pages.module').then(m => m.pagesmodule) }, { path: 'login', component: logincomponent, data: { title: '登录' } }, { path: 'error', component: errorcomponent, data: { title: '参数错误或者地址不存在' } }, { path: '**', redirectto: 'error', pathmatch: 'full' } ]; @ngmodule({ imports: [routermodule.forroot(routes)], exports: [routermodule] }) export class approutingmodule { }
非懒加载模式下,想要pages组件能够正常显示切换的路由和固定头部足部,路由只能像上述这样配置,也就是所有组件都在app模块中声明,显然不是很推荐这种模式,切换回懒加载模式:
{ path: '', canload: [authguard], canactivate: [authguard], canactivatechild: [ authguard ], candeactivate: [authguard], loadchildren: () => import('./pages/pages.module').then(m => m.pagesmodule) },
pages-routing.module.ts
初始模板:
const routes: routes = [ { path: '', redirectto: 'index', pathmatch: 'full' }, { path: 'index', component: indexcomponent, data: { title: '公司主页' } }, { path: 'about', component: aboutcomponent, data: { title: '关于我们' } }, { path: 'contact', component: contactcomponent, data: { title: '联系我们' } }, { path: 'news', candeactivate: [authguard], loadchildren: () => import('../component/news/news.module').then(m => m.newsmodule) }, ]
浏览器截图:
明明我们的html写了头部和底部组件却没显示?
路由的本质:根据配置的path路径去加载组件或者模块,此处我们是懒加载了路由,根据路由模块再去加载不同组件,唯独缺少了加载了pages组件,其实理解整个并不难,index.html中有个<app-root></app-root>,这就表明app组件被直接插入了dom中,反观pages组件,根本不存在直接插进dom的情况,所以这个组件根本没被加载,验证我们的猜想很简单:
export class pagescomponent implements oninit { constructor() { } ngoninit() { alert(); } }
经过刷新页面,alert()窗口并没有出现~,可想而知,直接通过路由模块去加载了对应组件;其实我们想要的效果就是之前改造前的app.component.html效果,所以路由配置要参照更改:
const routes: routes = [ { path: '', component: pagescomponent, children: [ { path: '', redirectto: 'index', pathmatch: 'full' }, { path: 'index', component: indexcomponent, data: { title: '公司主页' } }, { path: 'about', component: aboutcomponent, data: { title: '关于我们' } }, { path: 'contact', component: contactcomponent, data: { title: '联系我们' } }, { path: 'news', candeactivate: [authguard], loadchildren: () => import('../component/news/news.module').then(m => m.newsmodule) }, ] } ];
这样写,pages组件就被加载了,重回正题,差点回不来,我们在登录组件中写了简单的登录逻辑:
import { component, oninit } from '@angular/core'; import { formgroup, formcontrol, validators, formbuilder } from '@angular/forms'; import { router } from '@angular/router'; @component({ selector: 'app-login', templateurl: './login.component.html', styleurls: ['./login.component.scss'] }) export class logincomponent implements oninit { loginform: formgroup; constructor( private fb: formbuilder, private router: router ) { } ngoninit() { this.loginform = this.fb.group({ loginname: ['', [validators.required]], password: ['', [validators.required]] }); console.log(this.loginform); } loginsubmit(event, value) { if (this.loginform.valid) { window.localstorage.setitem('loginfo', json.stringify(this.loginform.value)); this.router.navigatebyurl('index'); } } }
守卫中:
canactivate(route: activatedroutesnapshot, state: routerstatesnapshot): boolean { // 权限控制逻辑如 是否登录/拥有访问权限 console.log('canactivate', route); const islogin = window.localstorage.getitem('loginfo') ? true : false; if (!islogin) { console.log('login'); this.router.navigatebyurl('login'); } return true; }
路由离开(选定应用的组件是contact组件):
candeactivate( component: contactcomponent, currentroute: activatedroutesnapshot, currentstate: routerstatesnapshot, nextstate: routerstatesnapshot): observable<boolean> | promise<boolean> | boolean { console.log('candeactivate'); return component.pageleave(); }
{ path: 'contact', candeactivate: [authguard], component: contactcomponent, data: { title: '联系我们' } }
pageleave(): observable<boolean> { return new observable(ob => { if (!this.issaven) { this.modal.warning({ nztitle: '正在离开,是否需要保存改动的数据?', nzonok: () => { // 保存数据 ob.next(false); alert('is saving'); this.issaven = true; }, nzcanceltext: '取消', nzoncancel: () => { ob.next(true); } }); } else { ob.next(true); } }); }
默认数据状态时未保存,可以选择不保存直接跳转也可以保存之后再跳转。
此场景多用于复杂表单页或者一些填写资料步骤的过程中,甚至浏览器后退和前进的操作也会触发这个守卫,唯一不足的地方时这个守卫绑定的是单一页面,无法统一对多个页面进行拦截。
下一篇介绍路由事件的运用。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
上一篇: 熊会爬树吗