Angular中CanActivate已弃用，如何重构为CanActivateFn？

针对你的 Angular 15 版本，将原类式守卫 AuthGuard 改造为函数式的 CanActivateFn 只需以下两步：

1. 重构 AuthGuard 为函数式守卫 #

替换原类式守卫代码，使用 inject() 获取依赖（Router 和 TokenStorageService），将逻辑迁移到函数中：

import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { TokenStorageService } from './path-to-your-token-storage.service'; // 替换为你的服务实际路径
import { inject } from '@angular/core';

export const authGuardFn: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
  // 注入所需服务
  const router = inject(Router);
  const tokenStorage = inject(TokenStorageService);

  // 校验 token 是否过期
  if (tokenStorage.isTokenExpired()) {
    router.navigateByUrl('/forbidden');
    return false;
  }

  // 校验角色权限
  const permittedRoles = route.data['permittedRoles'] as Array<string>;
  if (permittedRoles && !checkUserRole(permittedRoles, tokenStorage)) {
    router.navigateByUrl('/login');
    return false;
  }

  return true;
};

// 单独提取角色匹配逻辑
function checkUserRole(allowedRoles: string[], tokenStorage: TokenStorageService): boolean {
  const userRole = tokenStorage.getUserToken().role;
  return allowedRoles.includes(userRole);
}

2. 更新路由配置 #

将路由中的 canActivate 字段从类引用改为函数引用，同时移除模块中对 AuthGuard 类的注册（无需再在 providers 数组中声明）：

...
{
  path: 'submissionSumario', 
  loadChildren: () => import('./sumarios/submission-sumario/submission-sumario.module').then(m => m.SubmissionSumarioModule),
  canActivate: [authGuardFn], // 替换为函数式守卫
  data: {
    permittedRoles: ['admin', 'usercommon', 'useradvanced', 'guest'],
    title: 'Submission Article',
    robots: 'noindex',
    type: 'website'
  }
},
...

注意事项 #

• 确保 TokenStorageService 已通过 providedIn: 'root' 或模块 providers 正确提供
• inject() 必须在守卫函数执行期间调用，不能放在函数外部
• 原 AuthGuard 类可直接删除，无需保留

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