如何在Entra ID中为React应用映射角色与资源/操作/权限？

1. 在Entra ID应用注册中定义带权限元数据的应用角色 #

Entra ID的应用角色支持嵌入自定义元数据，你可以利用角色描述字段来存储JSON格式的资源/操作映射（这种方式最直接），也可以使用Entra ID的扩展属性。

比如创建角色时：

• 名称：报表编辑者
• 值：ReportEditor（该值会出现在JWT的roles声明中）
• 描述：{"resources": ["dashboard", "monthly_reports"], "actions": ["view", "edit", "export"]}

通过这种方式，每个应用角色就和对应的资源、操作权限关联起来了。

2. 分配应用角色给用户/组 #

按你熟悉的流程，在企业应用板块将定义好的角色分配给用户或安全组。用户通过SSO登录后，JWT令牌的roles数组会包含该用户拥有的所有角色值（比如["ReportEditor", "Viewer"]）。

3. 在React应用中解析权限并控制界面 #

JWT默认不会返回角色的描述内容，你需要在前端维护一份角色-权限映射表，或者通过后端接口获取对应角色的权限配置：

示例：前端维护映射表

创建rolePermissions.js配置文件：

export const rolePermissions = {
  "ReportEditor": {
    resources: ["dashboard", "monthly_reports"],
    actions: ["view", "edit", "export"]
  },
  "Viewer": {
    resources: ["dashboard"],
    actions: ["view"]
  }
};

登录后解析JWT的roles字段，遍历每个角色取出对应的资源和操作，再据此渲染菜单、按钮：

// 假设已解析出用户的roles数组：userRoles
const userPermissions = userRoles.flatMap(role => rolePermissions[role] || {});

// 控制菜单显示：只渲染用户有权限的资源
const visibleMenus = allMenus.filter(menu => 
  userPermissions.some(p => p.resources.includes(menu.id))
);

// 控制按钮显示：检查用户是否有对应操作权限
const canEditReport = userPermissions.some(p => 
  p.resources.includes("monthly_reports") && p.actions.includes("edit")
);

4. 进阶：结合Entra ID权限范围（Scopes）实现更细粒度控制 #

如果需要更精细化的权限管理，可以在应用注册的公开API中定义Scopes（比如Reports.Read、Reports.Write、Dashboard.View），然后在应用角色的描述里关联这些Scopes（比如{"scopes": ["Reports.Read", "Reports.Write"]}）。

这种方式下，Scopes作为最小粒度的操作权限，应用角色作为权限集合，前端通过映射表关联角色和Scopes，实现更灵活的权限控制。

关键注意事项 #

• 前端的权限控制仅用于界面渲染，敏感操作必须在后端做二次校验，避免前端被篡改后绕过权限限制。
• 如果角色权限需要动态更新，建议通过后端接口获取最新的角色-权限映射，而非硬编码在前端。

内容的提问来源于stack exchange，提问作者Andrés Bello