Angular中的Auth Guards

在Angular中，Auth Guards（身份验证守卫）是一个用于保护特定路由的机制。Auth Guards用来验证用户是否具有访问路由的权限。它们被用于在应用程序中对权限进行管理。

前提条件

在了解Auth Guards之前，需要确保您已经熟悉了Angular中的路由和路由守卫。如果您还不熟悉，可以先查看Angular中的路由.

什么是Auth Guards

Auth Guards是一个Angular提供的路由守卫类型。它们用于保护路由并在路由触发之前进行验证。

Auth Guards主要有两种类型：

1. CanActivate：它用于验证是否有权限进入路由。
2. CanActivateChild：它用于验证是否有权限进入子路由。

在应用程序中，您可以将Auth Guards用于对特定路由进行保护，以便只有授权用户才能访问。

如何创建Auth Guards

在Angular中创建Auth Guards主要有两种方式：

1. 使用CLI命令

使用Angular CLI命令行工具，您可以轻松创建一个新的Auth Guard。以下是创建一个新的CanActivate守卫的命令：

ng generate guard auth

这样将生成一个新的AuthGuard类，它可以被用于保护路由。

2. 手工创建Auth Guard

如果您不想使用CLI，也可以手工创建AuthGuard。以下是创建一个新的CanActivate守卫的步骤：

1. 创建一个新的AuthGuard类，它实现了CanActivate接口。

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

2. 在AuthGuard类中实现CanActivate接口的canActivate方法。

canActivate方法接收两个参数：

• next：下一步路由
• state：当前状态

canActivate方法应该返回一个Observable或Promise或一个布尔值。返回false将阻止用户访问路由，而返回true将允许用户访问路由。

在路由中使用Auth Guards

在路由配置中，您可以使用AuthGuard来保护特定的路由。以下是如何在路由配置中使用AuthGuard：

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

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule), canActivate: [AuthGuard] },
  { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule), canActivateChild: [AuthGuard] }
];

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

在上面的代码片段中，我们在路由配置中添加了一个守卫，来保护/about路由和其子路由/contact。

总结

在Angular中，Auth Guards是一个用于保护特定路由的机制。Auth Guards用于验证用户是否具有访问路由的权限。它们被用于在应用程序中对权限进行管理。在应用程序中，您可以将Auth Guards用于对特定路由进行保护，以便只有授权用户才能访问。您可以使用Angular CLI创建一个新的AuthGuard，也可以手工创建一个AuthGuard。在路由配置中，您可以使用AuthGuard来保护特定的路由。