Angular中CanActivate接口已弃用，如何替换原有AuthGuard实现？

根据Angular的更新要求，从15.2版本开始，类实现的守卫（implements CanActivate/CanActivateChild）已被弃用，官方推荐使用函数式守卫替代。以下是针对你代码的具体调整方案：

调整后的代码实现 #

import { inject } from '@angular/core';
import { CanActivateFn, CanActivateChildFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from './path-to-auth-service'; // 替换为你的认证服务实际路径
import { of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// 核心守卫函数，同时支持CanActivate和CanActivateChild场景
export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  // 使用inject()获取依赖，替代类的构造函数注入
  const authService = inject(AuthenticationService);
  const router = inject(Router);

  return authService.checkLogin().pipe(
    map(() => true),
    catchError(() => {
      router.navigate(['route-to-fallback-page']);
      return of(false);
    })
  );
};

// 复用同一个函数作为CanActivateChild守卫（类型完全兼容）
export const authChildGuard: CanActivateChildFn = authGuard;

路由配置的修改 #

原来在路由中引用类守卫的方式：

{
  path: 'protected',
  component: ProtectedComponent,
  canActivate: [AuthGuard],
  canActivateChild: [AuthGuard]
}

改为引用函数式守卫：

{
  path: 'protected',
  component: ProtectedComponent,
  canActivate: [authGuard],
  canActivateChild: [authChildGuard]
}

关键说明 #

1. 函数式守卫的优势：不需要实现接口，直接通过CanActivateFn/CanActivateChildFn类型约束，代码更轻量化。
2. 依赖注入方式：使用inject()函数在函数内部获取服务实例，替代类的构造函数注入逻辑。
3. 逻辑复用：CanActivateChild的参数和返回值类型与CanActivate完全一致，因此可以直接复用同一个守卫函数，无需重复编写逻辑。

内容的提问来源于stack exchange，提问作者kellermat