MSAL React无法读取令牌内已存在的roles角色声明

• 场景：单租户React + .NET Core应用增量开发App Roles功能，此前已通过MSAL完成用户身份认证
• 已完成配置：
  • Azure AD侧已完成应用角色创建与分配
  • .NET后端配置角色校验的Authorize特性可正常生效
  • 手动解码签发的ID令牌，可明确看到roles字段及对应角色值
• 异常现象：React端通过MSAL原生API读取角色时始终返回null，遍历idTokenClaims对象可见其余所有声明，唯独缺失roles字段
• 现有实现代码：
  MSAL初始化逻辑：

  export const msalInstance = new PublicClientApplication(msalConfig);
  
  const accounts = msalInstance.getAllAccounts();
  
  if (accounts.length > 0) {
    msalInstance.setActiveAccount(accounts[0]);
  }
  

  测试页读取角色逻辑：

  const TestComponent = () => {
    const { instance } = useMsal();
    const [tokenRoles, setTokenRoles] = useState(null);
  
    useEffect(() => {
      const activeAccount = instance.getActiveAccount();
      setTokenRoles(activeAccount?.idTokenClaims?.roles);
      // 尝试过下标写法，依然无效
      // setTokenRoles(activeAccount?.idTokenClaims['roles']);
    }, [instance]);
  
    return (
      <div>
        ROLES: {JSON.stringify(tokenRoles)}
      </div>
    );
  };
  

  手动解码令牌可见的roles字段：

  {
    ...
    "roles": [
      "Packages.Manage"
    ],
    ...
  }
  

• 诉求：不使用手动解码令牌的方案，通过MSAL原生能力正确获取roles声明。

问题核心原因是初始化时直接读取本地缓存的账号对象，拿到的是角色配置生效前签发的旧令牌对应的缓存声明，没有同步最新的令牌内容，按以下步骤修复即可：

1. 替换原有初始化时直接读取缓存设置活跃账号的逻辑，添加MSAL事件回调，在登录/令牌刷新成功后同步更新活跃账号，确保拿到最新的账号信息：

import { PublicClientApplication, EventType } from "@azure/msal-browser";

export const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.addEventCallback((event) => {
  if (
    (event.eventType === EventType.LOGIN_SUCCESS || event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)
    && event.payload?.account
  ) {
    msalInstance.setActiveAccount(event.payload.account);
  }
});

2. 不要直接从getActiveAccount()返回的缓存对象中读取claims，在组件中主动调用acquireTokenSilent拉取最新令牌，从返回结果中读取roles字段，避免读取到过期缓存：

const TestComponent = () => {
  const { instance, accounts } = useMsal();
  const [tokenRoles, setTokenRoles] = useState(null);

  useEffect(() => {
    const loadRoles = async () => {
      const activeAccount = accounts[0] || instance.getActiveAccount();
      if (!activeAccount) return;

      // 替换为自己应用实际配置的scope，必须包含openid、profile基础权限
      const tokenRequest = {
        scopes: ["openid", "profile"],
        account: activeAccount
      };

      try {
        const tokenResponse = await instance.acquireTokenSilent(tokenRequest);
        setTokenRoles(tokenResponse.idTokenClaims?.roles || []);
      } catch (err) {
        // 静默获取失败时触发交互登录
        instance.acquireTokenRedirect(tokenRequest);
      }
    };

    loadRoles();
  }, [instance, accounts]);

  return (
    <div>
      ROLES: {JSON.stringify(tokenRoles)}
    </div>
  );
};

3. 若以上操作后仍无法读取，检查Azure AD应用注册的令牌配置，确认已为ID令牌勾选roles可选声明，而非仅为访问令牌配置该声明。修改配置后清除浏览器本地缓存，重新登录即可正常获取角色。

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