Angular项目中如何获取TypeScript Enum的字符串初始值而非键名

问题原因 #

你当前遇到的报错本质是两个问题叠加：

1. 从JWT解码出来的role实际是枚举的键名（字符串"Administrator"），而非你定义的枚举值"Head Administrator"，你用Role[键名]的思路是对的
2. this.authService.userInfo可能为null，导致userInfo?.role可能为undefined，不能直接作为索引访问枚举

直接修复方案（仅修改header.component.ts） #

把你的role getter改成如下写法即可：

get role(): string {
  const roleKey = this.authService.userInfo?.role;
  // 先判断键存在且属于枚举的合法键，再取值
  if (roleKey && Object.prototype.hasOwnProperty.call(Role, roleKey)) {
    return Role[roleKey as keyof typeof Role];
  }
  return '';
}

这里加类型断言as keyof typeof Role是为了匹配TypeScript对枚举索引的类型要求，避免类型报错。

更规范的全局优化方案 #

如果后续还有其他地方需要用到用户角色的显示值，建议直接在JWT解码层就完成转换，避免每个用到的地方都重复写转换逻辑：
修改auth.service.ts中的userInfo getter：

get userInfo(): IUser | null {
  const accessToken = this.currentUserValue?.accessToken;
  if (!accessToken) return null;
  // 先按实际结构解码，role字段是字符串类型的键名
  const decodedToken = this.jwtService.decodeToken<Omit<IUser, 'role'> & { role: string }>(accessToken);
  return {
    ...decodedToken,
    // 转成枚举值再返回
    role: Role[decodedToken.role as keyof typeof Role]
  } as IUser;
}

改完之后你原来header.component.ts里的role getter不需要动，直接返回this.authService.userInfo?.role || ''就能拿到正确的枚举值。

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