Angular路由守卫AuthGuard的创建与使用指南

Angular中的AuthGuard

在Angular开发中，路由守卫AuthGuard是最常用的权限控制工具之一。它像一道安全门禁，专门拦截未登录或缺乏权限的用户，阻止其直接访问需要身份验证的页面。配合路由配置，AuthGuard能高效实现访问控制。

创建AuthGuard守卫

AuthGuard本质上是一个Angular服务，生成起来并不复杂。在命令行中执行以下代码即可：

ng g guard auth

执行该命令后，将在 src/app/auth.guard.ts 位置生成名为 auth 的守卫文件。查看其内容，大致代码如下：

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 | Promise | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.na vigate(['/login']);
      return false;
    }
  }
}

核心逻辑位于 canActivate() 方法中。该守卫通过实现 CanActivate 接口来定义，该接口仅需一个方法，用于决定用户访问受保护路由时的行为。在实现时，我们注入了两个依赖：AuthService 用于检测用户登录状态，Router 用于页面跳转。

流程非常清晰：首先调用 this.authService.isLoggedIn() 检查登录状态。若已登录，返回 true 并允许访问；否则重定向至 /login 页面，返回 false 拒绝访问。这种方式简洁高效，非常适合实际应用。

AuthGuard保护单个路由

光有守卫还不够，还需要告诉Angular哪个路由需要被保护。做法就是在路由配置中，将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 属性上。效果是：用户必须完成登录才能访问仪表盘页面，否则将被拦截并重定向至登录页。

以上即为Angular中AuthGuard路由守卫的完整创建与使用流程。从生成守卫文件到配置路由，每个步骤清晰明确，易于上手。在实际项目中，还可根据需求扩展权限逻辑，例如角色判断、参数验证等，但核心原理保持不变。