Angular系列教程之路由守卫

文章目录

前言

在Angular中，路由守卫是一个非常有用的功能，可以帮助我们控制用户在导航过程中的权限和访问限制。通过使用路由守卫，我们可以拦截导航并根据需求决定是否允许用户继续访问特定的页面或组件。

路由守卫的类型

Angular提供了以下几种类型的路由守卫：

CanLoad：进入到当前路由的时候触发（若用户没有权限访问，相应的模块并不会被加载。这里是指对应组件的代码）。
CanActivate：用于控制是否允许用户访问目标路由。
CanActivateChild：用于控制是否允许用户访问目标路由的子路由。
CanDeactivate：用于控制是否允许用户离开当前路由。
Resolve：用于在路由激活之前获取必要的数据。

下面我们将逐个介绍这些路由守卫，并给出相应的示例代码。

CanLoad

进入到当前路由的时候触发（若用户没有权限访问，相应的模块并不会被加载。这里是指对应组件的代码）。

下面是一个示例代码，展示如何使用CanLoad守卫来控制访问权限：

typescript 复制代码

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router, UrlSegment } from '@angular/router';
 
@Injectable()
export class CanLoadGuard implements CanLoad {
 
    constructor(private router: Router) { }
 
    canLoad(
        route: Route,
        segments: UrlSegment[]
    ) {
        // 在这里编写你的权限控制逻辑
        const isAuthenticated = // 检查用户是否已登录

        if (isAuthenticated) {
          return true; // 允许导航
        } else {
          // 将用户重定向到登录页面
          this.router.navigate(['/login']);
          return false; // 拒绝导航
        }
    }
 
}

要使用CanLoad守卫，我们需要将它添加到路由配置中的目标路由上，如下所示：

typescript 复制代码

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canLoad: [CanLoadGuard]
  },
  // 其他路由配置...
];

CanActivate

CanActivate守卫用于控制是否允许用户访问目标路由。当导航发生时，CanActivate守卫将被触发，并根据返回的布尔值来允许或拒绝导航。

下面是一个示例代码，展示如何使用CanActivate守卫来控制访问权限：

typescript 复制代码

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

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

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    // 在这里编写你的权限控制逻辑
    const isAuthenticated = // 检查用户是否已登录
    
    if (isAuthenticated) {
      return true; // 允许导航
    } else {
      // 将用户重定向到登录页面
      this.router.navigate(['/login']);
      return false; // 拒绝导航
    }
  }

}

在上面的代码中，我们创建了一个名为AuthGuard的服务，并实现了CanActivate接口。在canActivate方法中，我们可以编写自己的权限控制逻辑。如果用户已经登录，我们返回true以允许导航，否则我们将用户重定向到登录页面并返回false拒绝导航。

要使用CanActivate守卫，我们需要将它添加到路由配置中的目标路由上，如下所示：

typescript 复制代码

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

CanActivateChild

CanActivateChild守卫用于控制是否允许用户访问目标路由的子路由。它与CanActivate守卫的使用方式类似。

下面是一个示例代码，展示如何使用CanActivateChild守卫来控制访问权限：

typescript 复制代码

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

  constructor(private router: Router) {}

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    // 在这里编写你的权限控制逻辑
    const isAuthenticated = // 检查用户是否已登录
    
    if (isAuthenticated) {
      return true; // 允许导航
    } else {
      // 将用户重定向到登录页面
      this.router.navigate(['/login']);
      return false; // 拒绝导航
    }
  }

}

要使用CanActivateChild守卫，我们需要将它添加到路由配置中的目标路由上，如下所示：

typescript 复制代码

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivateChild: [AuthGuard],
    children: [
      // 子路由配置...
    ]
  },
  // 其他路由配置...
];

CanDeactivate

CanDeactivate守卫用于控制是否允许用户离开当前路由。当用户尝试离开当前路由时，CanDeactivate守卫将被触发，并根据返回的布尔值来允许或拒绝离开。

下面是一个示例代码，展示如何使用CanDeactivate守卫来控制离开权限：

typescript 复制代码

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

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

  canDeactivate(
    component: any,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    // 在这里编写你的离开权限控制逻辑
    const isDirty = // 检查当前组件是否有未保存的更改
    
    if (isDirty) {
      return confirm('您有未保存的更改，确定要离开吗？'); // 提示用户是否继续离开
    } else {
      return true; // 允许离开
    }
  }

}

在上面的代码中，我们创建了一个名为DirtyCheckGuard的服务，并实现了CanDeactivate接口。在canDeactivate方法中，我们可以编写自己的离开权限控制逻辑。如果当前组件有未保存的更改，我们将提示用户是否继续离开。

要使用CanDeactivate守卫，我们需要将它添加到路由配置中的目标路由上，如下所示：

typescript 复制代码

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canDeactivate: [DirtyCheckGuard]
  },
  // 其他路由配置...
];

Resolve

Resolve守卫用于在路由激活之前获取必要的数据。它可以帮助我们在加载组件之前获取所需的数据，以便在组件内部使用。

下面是一个示例代码，展示如何使用Resolve守卫来获取数据：

typescript 复制代码

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();
  }

}

在上面的代码中，我们创建了一个名为DataResolver的服务，并实现了Resolve接口。在resolve方法中，我们可以编写自己的获取数据逻辑。在本例中，我们使用DataService服务来获取数据。

要使用Resolve守卫，我们需要将它添加到路由配置中的目标路由上，如下所示：

typescript 复制代码

const routes: Routes = [
  {
    path: 'data',
    component: DataComponent,
    resolve: {
      data: DataResolver
    }
  },
  // 其他路由配置...
];

在上述代码中，我们将DataResolver添加到resolve属性中。这将确保在加载DataComponent之前先获取数据。

总结

路由守卫是Angular中一个非常有用的功能，可以帮助我们控制用户在导航过程中的权限和访问限制。通过使用CanLoad、CanActivate、CanActivateChild、CanDeactivate和Resolve守卫，我们可以实现各种导航控制需求，并为用户提供更好的体验。

示例代码仅为演示目的，你可以根据自己的需求进行修改和扩展。希望本文能够帮助你理解和使用Angular的路由守卫功能！