Angular 系列教程：掌握路由守卫以提升应用安全性

2023-09-10 05:54:35

前言

在 Angular 中，路由守卫是一个至关重要的功能，它允许我们控制用户在导航过程中的权限和访问限制。通过使用路由守卫，我们可以拦截导航并根据需要决定是否允许用户继续访问特定的页面或进行特定的操作。这对于实施权限管理、防止未经授权的访问以及提升应用程序的整体安全性至关重要。

在本文中，我们将深入探讨 Angular 路由守卫的概念，并逐步学习如何使用它们来实现各种安全和导航控制方案。

什么是路由守卫？

路由守卫是 Angular 提供的一组类，它们允许我们拦截应用程序中的导航过程。这些守卫充当守门员，检查导航是否满足预定义的条件，例如用户是否具有访问特定页面的权限。

Angular 提供了多种内置路由守卫，包括：

CanActivate ：用于决定是否允许激活一个组件或路由。
CanActivateChild ：与 CanActivate 类似，但用于嵌套路由。
CanDeactivate ：用于决定是否允许离开一个组件或路由。
CanLoad ：用于决定是否允许加载一个延迟加载的模块。

如何使用路由守卫

Angular 中的路由守卫通过实现特定接口并注册到路由配置中来使用。让我们逐个查看每个内置路由守卫的用法。

CanActivate

用途： 决定是否允许激活一个组件或路由。

接口： CanActivate<T>

用法：

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 {
    // 检查用户是否已登录
    const isLoggedIn = this.authService.isLoggedIn();
    if (isLoggedIn) {
      return true;
    } else {
      // 如果未登录，重定向到登录页面
      this.router.navigate(['/login']);
      return false;
    }
  }
}

CanActivateChild

用途： 与 CanActivate 类似，但用于嵌套路由。

接口： CanActivateChild<T>

用法： 与 CanActivate 用法类似。

CanDeactivate

用途： 决定是否允许离开一个组件或路由。

接口： CanDeactivate<T>

用法：

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

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<ComponentWithUnsavedChanges> {
  canDeactivate(component: ComponentWithUnsavedChanges, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    // 检查组件中是否有未保存的更改
    const hasUnsavedChanges = component.hasUnsavedChanges();
    if (hasUnsavedChanges) {
      // 提示用户确认离开
      return confirm('Are you sure you want to leave without saving?');
    } else {
      return true;
    }
  }
}

CanLoad

用途： 决定是否允许加载一个延迟加载的模块。

接口： CanLoad<T>

用法：

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

@Injectable({
  providedIn: 'root'
})
export class FeatureGuard implements CanLoad {
  canLoad(route: Route): boolean {
    // 检查当前用户的权限是否允许加载模块
    const hasPermission = this.authService.hasPermission(route.data.feature);
    if (hasPermission) {
      return true;
    } else {
      // 如果没有权限，重定向到无权限页面
      this.router.navigate(['/unauthorized']);
      return false;
    }
  }
}

注册路由守卫

要使用路由守卫，我们需要将它们注册到应用程序的路由配置中。这可以通过以下方式完成：

import { Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard] // 注册 AuthGuard
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canDeactivate: [CanDeactivateGuard] // 注册 CanDeactivateGuard
  },
  // 其他路由配置...
];