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

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