React应用中如何刷新Azure下发的Power BI访问令牌？

完全可以实现自动刷新Power BI访问令牌，powerbi-client-react包本身就提供了内置的令牌刷新机制，不用手动监听过期时间或操作报表实例。

具体实现步骤： #

1. 编写令牌刷新函数
   实现一个返回Promise的函数，通过你的后端服务获取新的访问令牌（注意：不能直接在前端调用Azure令牌接口，必须通过自有后端中转，避免泄露敏感凭据）。示例：

   const getNewAccessToken = async () => {
     // 调用后端接口获取新的Power BI访问令牌
     const response = await fetch('/api/get-new-powerbi-token');
     const data = await response.json();
     return data.accessToken;
   };
   

2. 启用embedConfig中的eventHooks
   打开代码中注释掉的eventHooks配置，将accessTokenProvider指向上面的刷新函数。Power BI嵌入组件会在令牌即将过期时自动调用该函数，获取新令牌并更新报表授权信息，全程无需手动干预。

修改后的完整组件代码示例： #

<PowerBIEmbed
  embedConfig={{
    type: 'report',
    id: '<report Id>',
    accessToken: '<access token>',
    tokenType: models.TokenType.Aad,
    permissions: models.Permissions.All,
    viewMode: models.ViewMode.Edit,
    // 启用令牌自动刷新
    eventHooks: {
      accessTokenProvider: getNewAccessToken
    },
    settings: {
      panes: {
        filters: {
          expanded: false,
          visible: true
        },
        bookmarks: {
          visible: false
        },
        fields: {
          expanded: false
        },
        pageNavigation: {
          visible: true
        },
        selection: {
          visible: false
        },
        syncSlicers: {
          visible: false
        },
        visualizations: {
          expanded: false
        }
      }
    }
  }}

  eventHandlers={
    new Map([
      ['loaded', () => console.log('Report loaded')],
      ['rendered', () => console.log('Report rendered')],
      ['error', (event) => console.log(event.detail)]
    ])
  }
  cssClassName="Embed-container"

  getEmbeddedComponent={(embeddedReport) => {
    window.report = embeddedReport;
  }}
/>

额外说明： #

• 该机制会自动处理令牌过期逻辑，无需手动监听过期时间或调用报表实例的setAccessToken方法。
• 确保后端接口能正确返回有效新令牌，且接口自身的认证机制安全（比如使用用户会话或JWT验证）。

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