如何通过ActivatedRouteSnapshot访问Angular路由关联组件的自定义属性

问题背景 #

使用场景 #

使用Angular Guard的CanActivate能力对组件做访问权限管控。

路由示例 #

{
 path: "my-path",
 component: MyComponent,
 canActivate: [AuthGuard]
}

示例组件MyComponent #

export class MyComponent {
  // AuthGuard判断是否放行所需的依赖项
  // 每个组件声明自身守卫的资源及对应的访问级别
  static guardedResources = [
    {"user_profile" : {"access" : "write"}},
    {"posts" : {"access" : "read"}}
  ];
}

AuthGuard代码 #

canActivate(route: ActivatedRouteSnapshot) {
  // 组件会在运行时通过route.component解析
  
  // 此处存放读取组件guardedResources、与用户访问权限匹配的通用逻辑
}

报错信息 #

尝试通过route.component.guardedResources访问组件属性时，抛出如下TS错误：

error TS2339: Property 'guardedResources' does not exist on type 'string | Type<any>'.
      Property 'guardedResources' does not exist on type 'string'.

执行console.log(route.component)可以在控制台输出组件的完整内容，可通过对route.component做适当类型转换来正常访问guardedResources属性。

现有思路 #

• 将guardedResources抽象到基类中，在派生组件中覆写该属性。
• 将route.component类型转换为该基类类型，即可合法访问guardedResources属性。

解决方案 #

报错原因 #

TypeScript定义中ActivatedRouteSnapshot.component的类型为Type<any> | string，因为路由配置的component字段支持传入组件类或者懒加载字符串路径，TS无法确认运行时拿到的值类型，直接访问自定义静态属性就会触发类型校验报错。

完整实现步骤 #

1. 定义通用类型约束与基类

// 定义守卫资源的结构类型
interface GuardedResource {
  [resourceKey: string]: {
    access: 'read' | 'write' | 'delete'
  }
}

// 定义带静态守卫属性的组件接口
interface GuardedComponent {
  guardedResources: GuardedResource[]
}

// 抽象基类，所有需要权限守卫的组件继承该类即可
abstract class BaseGuardedComponent {
  static guardedResources: GuardedResource[] = []
}

2. 业务组件继承基类并覆写静态属性

export class MyComponent extends BaseGuardedComponent {
  static override guardedResources = [
    {"user_profile" : {"access" : "write"}},
    {"posts" : {"access" : "read"}}
  ];
}

3. AuthGuard中做类型收窄与断言

import { Type } from '@angular/core';

canActivate(route: ActivatedRouteSnapshot) {
  const component = route.component;
  // 先过滤component为字符串的场景
  if (typeof component === 'string') {
    // 可按需添加字符串路由对应的权限逻辑，此处示例直接返回false
    return false;
  }

  // 类型断言为符合约束的组件类
  const guardedComponent = component as Type<unknown> & GuardedComponent;
  // 可正常访问静态属性
  const requiredResources = guardedComponent.guardedResources;

  // 后续权限匹配逻辑
  // ...
}

简化方案（不需要基类） #

如果不需要统一约束组件结构，也可以直接在Guard中做一次性类型断言即可：

canActivate(route: ActivatedRouteSnapshot) {
  if (typeof route.component !== 'string') {
    const resources = (route.component as any).guardedResources;
    // 后续逻辑
  }
}

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