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);
   }
  });
 }

默认数据状态时未保存，可以选择不保存直接跳转也可以保存之后再跳转。

此场景多用于复杂表单页或者一些填写资料步骤的过程中，甚至浏览器后退和前进的操作也会触发这个守卫，唯一不足的地方时这个守卫绑定的是单一页面，无法统一对多个页面进行拦截。

下一篇介绍路由事件的运用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。