一、路由守卫

守卫，顾名思义，必须满足一定的条件得到许可方可通行，否则拒绝访问或者重定向。Angular中路由守卫可以借此处理一些权限问题，通常应用中存储了用户登录和用户权限信息，遇到路由导航时会进行验证是否可以跳转。

二、4种守卫类型

按照触发顺序依次为：canload（加载）、canActivate（进入）、canActivateChild（进入子路由）和canDeactivate（离开）。

2.1、canload

默认值为true，表明路由是否可以被加载，一般不会认为控制这个守卫逻辑，99.99%情况下，默认所有app模块下路由均允许canLoad

2.2、canActivate

是否允许进入该路由，此场景多为权限限制的情况下，比如客户未登录的情况下查询某些资料页面，在此方法中去判断客户是否登陆，如未登录则强制导航到登陆页或者提示无权限，即将返回等信息提示。

2.3、canActivateChild

是否可以导航子路由，同一个路由不会同时设置canActivate为true，canActivateChild为false的情况，此外，这个使用场景很苛刻，尤其是懒加载路由模式下，暂时未使用到设置为false的场景。

2.4、canDeactivate

路由离开的时候进行触发的守卫，使用场景比较经典，通常是某些页面比如表单页面填写的内容需要保存，客户突然跳转其它页面或者浏览器点击后退等改变地址的操作，可以在守卫中增加弹窗提示用户正在试图离开当前页面，数据还未保存 等提示。

三、模拟登录实例

必须先登录才可以跳转到默认路由。

3.1、定义路由捍卫方法

import { Injectable } from '@angular/core';
import { EvironmentService } from './evironment.service';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, Route } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UserService } from './user.service';@Injectable({providedIn: 'root'
})
export class AutherticationGuardService {constructor(private router: Router,private evironmentService: EvironmentService,private userService: UserService,) { }canLoad(route: Route) {// 是否可以加载路由console.log('canload');return true;}canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {// console.log(state);return this.evironmentService.userEnabled$.pipe(map(userEnabled => {if (userEnabled) {// first loginif (!this.userService.getUserId()) {this.userService.setUserId();this.router.navigate(['login/login']);console.log('必须先登录！');return false;}console.log('canActivate');return true;}}));}canActivateChild() {// 返回false则导航将失败/取消// 也可以写入具体的业务逻辑console.log('canActivateChild');return true;}canDeactivate(currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) {console.log('canDeactivate');return true;}
}

3.2、使用路由捍卫

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AutherticationGuardService } from './core/services/authertication-guard.service';const routes: Routes = [{path: 'login',loadChildren: './modules/login/login.module#LoginModule'},{path: 'plan',loadChildren: './modules/plan/plan.module#PlanModule',canLoad: [AutherticationGuardService],canActivate: [AutherticationGuardService],canActivateChild: [AutherticationGuardService],canDeactivate: [AutherticationGuardService],},{path: 'design',loadChildren: './modules/design/design.module#DesignModule'},{path: 'execution',loadChildren: './modules/execution/execution.module#ExecutionModule'},{path: '**',redirectTo: 'plan/plan-home',pathMatch: 'full'}
];@NgModule({declarations: [],imports: [RouterModule.forRoot(routes, { useHash: true })],exports: [RouterModule],providers: [AutherticationGuardService]
})
export class AppRoutingModule { }

3.3、效果

学习地址

Angular8路由守卫原理和使用方法