Angular 中的 AuthGuard 是一个路由守卫，它用于保护某些路由，只有当用户经过身份验证并具有访问权限时，才允许他们访问。AuthGuard 通常与路由配置一起使用，以确保用户无法直接访问需要身份验证的页面。
AuthGuard 是一个 Angular 服务，可以使用以下命令来创建它：
ng g guard auth
上面的命令将生成一个名为“auth”的 AuthGuard，并将其添加到
src/app/auth.guard.ts 文件中。auth.guard.ts 文件中的代码如下所示： import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree { if (this.authService.isLoggedIn()) { return true; } else { this.router.navigate(['/login']); return false; } } }
在上面的代码中，AuthGuard 是通过实现 CanActivate 接口来定义的。CanActivate 接口包含一个名为 canActivate() 的方法，该方法决定了当用户尝试访问受保护的路由时应该执行哪些操作。
在 AuthGuard 中，我们注入了一个名为 AuthService 的服务和 Router 对象。AuthService 用于检查用户是否已经登录，而 Router 用于导航到登录页面或者用户试图访问的页面。在 canActivate() 方法中，我们首先调用 this.authService.isLoggedIn() 方法来检查用户是否已经登录。如果用户已经登录，我们返回 true，表示用户可以访问该路由。否则，我们调用 this.router.navigate(['/login']) 方法，将用户重定向到登录页面，然后返回 false，表示用户无法访问该路由。
要使用 AuthGuard 来保护一个路由，我们需要在路由配置中将 AuthGuard 添加到 canActivate 属性中。例如：
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { LoginComponent } from './login/login.component'; import { AuthGuard } from './auth.guard'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, { path: 'login', component: LoginComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
在上面的代码中，我们将 AuthGuard 添加到了 /dashboard 路由的 canActivate 属性中，这意味着只有当用户已经登录时才能访问 /dashboard 路由。
————————————————
版权声明：本文为CSDN博主「汪子熙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/i042416/article/details/130529652
