守卫，顾名思义，必须满足一定的条件得到许可方可通行，否则拒绝访问或者重定向。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> <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 { }