Angular中Inject()无法为CanActivateFn注入Router致重定向失败

云上老周

2026-8-1

问题解决：Angular v14 CanActivateFn守卫重定向报错router.parseUrl is not a function

错误原因

你在函数式守卫里错误使用了**Inject(Router)**装饰器，这个装饰器仅用于类的构造函数参数注入，不能直接在普通函数中调用，因此你获取到的router并非真正的Router实例，而是ParamDecorator对象，最终导致调用parseUrl时触发类型错误。

修正方案

函数式守卫需使用Angular提供的**inject()**函数（小写开头）来获取依赖，这是Angular独立组件/函数式API中获取依赖的标准方式。

修正后的`allowed-entities.guard.fn.ts`代码

import { CanActivateFn, ActivatedRouteSnapshot, Router, inject } from '@angular/router';

export function AllowedEntitiesGuard(allowedEntities: string[]): CanActivateFn {
  // 使用inject()函数正确获取Router实例
  const router = inject(Router);
  return (route: ActivatedRouteSnapshot) => {
    const entitiesTypeParameter = route.paramMap.get('entitiesType');

    // 处理参数为null的边界情况，避免后续逻辑报错
    if (!entitiesTypeParameter) {
      return router.parseUrl('/');
    }
    
    return allowedEntities.includes(entitiesTypeParameter) ? true : router.parseUrl('/');
  };
}