Angular路由守卫的使用指南

路由守卫是 Angular 框架中非常有用的功能之一，它允许我们在路由导航期间进行拦截和控制。本文将介绍 Angular 路由守卫的基本用法以及一些常见的应用场景。

什么是路由守卫

路由守卫是用于控制和拦截路由导航的机制。通过使用路由守卫，我们可以在用户导航到某个路由之前或之后执行一些逻辑操作。Angular 提供了四种类型的路由守卫：

CanActivate：在导航过程中判断是否允许激活这个路由。
CanDeactivate：在导航过程中判断是否允许离开当前路由。
Resolve：在路由激活之前，提前解析指定的数据。
CanLoad：在懒加载模块时，判断是否允许加载该模块。

使用路由守卫

CanActivate

要使用 CanActivate 路由守卫，首先需要创建一个实现了 CanActivate 接口的服务类，例如 AuthGuard。然后，通过在路由配置中添加 canActivate 属性来指定使用哪个守卫。例如：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 在这里判断用户是否有权限访问该路由
    return true; // 返回 true 表示允许访问，返回 false 表示禁止访问
  }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的例子中，canActivate 方法用于判断是否允许激活路由。如果返回 true，则允许访问 home 路由，如果返回 false，则禁止访问。AuthGuard 类是一个可注入的服务，因此需要在路由模块中添加到 providers 数组中。

CanDeactivate

CanDeactivate 守卫类似于 CanActivate，但它用于判断是否允许离开当前路由界面。使用方法和 CanActivate 类似，只需要替换 CanActivate 为 CanDeactivate 即可。

Resolve

Resolve 守卫用于在路由激活前，先预加载一些数据。要使用 Resolve 守卫，需要创建一个实现了 Resolve 接口的服务类，并实现 resolve 方法。例如：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    // 在这里执行解析逻辑，获取需要预加载的数据
    return this.dataService.getData();
  }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { DataResolver } from './data.resolver';

const routes: Routes = [
  { path: 'home', component: HomeComponent, resolve: { data: DataResolver } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的例子中，resolve 对象用于指定需要预加载的数据，DataResolver 类的 resolve 方法用于执行解析逻辑并返回数据。返回的数据将会作为路由中的 data 属性传递给 HomeComponent 组件。

CanLoad

CanLoad 守卫用于在懒加载模块时判断是否允许加载该模块。要使用 CanLoad 守卫，只需要在路由配置中添加 canLoad 属性，指定要使用的守卫即可。

import { Injectable } from '@angular/core';
import { CanLoad, Route } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class LoadGuard implements CanLoad {

  canLoad(route: Route): boolean {
    // 在这里判断是否允许加载该模块
    return true; // 返回 true 表示允许加载，返回 false 表示禁止加载
  }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';
import { LoadGuard } from './load.guard';

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule), canLoad: [LoadGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的例子中，LoadGuard 类的 canLoad 方法用于判断是否允许加载该模块。如果返回 true，则允许加载 lazy 模块，如果返回 false，则禁止加载。

结语

Angular 路由守卫是控制和拦截路由导航的强大工具。通过使用不同的守卫类型，我们可以在路由导航过程中执行各种逻辑操作，例如用户身份验证、数据预加载、权限控制等。以上是 Angular 路由守卫的基本用法和一些常见的应用场景。希望本文对你理解和使用 Angular 路由守卫有所帮助。

本文来自极简博客，作者：心灵画师，转载请注明原文链接：Angular路由守卫的使用指南