React嵌入Power BI报告access token1小时过期，求解决方案

核心原因：Azure AD颁发的访问令牌默认有效期为1小时，硬编码令牌无法自动刷新，所以会出现定期失效问题。

推荐实现方案（可直接用于生产环境） #

• 移除前端硬编码令牌，改为后端接口动态下发令牌
  所有Azure AD凭证（客户端ID、客户端密钥、租户ID等）全部存储在后端，后端通过Azure AD客户端凭证流/用户委托流申请Power BI访问令牌，前端仅通过后端封装的接口获取令牌，避免凭证泄露风险。
• 前端使用状态管理令牌，添加自动刷新逻辑
  用React状态存储当前有效令牌，设置定时器提前5分钟（即55分钟周期）主动请求新令牌，避免到期中断使用。
• 调用Power BI SDK内置方法更新令牌
  拿到新令牌后直接调用嵌入实例的updateAccessToken方法即可完成热更新，无需重新加载整个组件或页面。

完整代码示例 #

import { useState, useEffect, useRef } from 'react';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

const PowerBIReport = () => {
  const [accessToken, setAccessToken] = useState('');
  const reportRef = useRef(null);

  // 获取令牌的方法
  const fetchPowerBIToken = async () => {
    try {
      // 请求自有后端的令牌下发接口
      const res = await fetch('/api/get-powerbi-token');
      const { token } = await res.json();
      setAccessToken(token);
    } catch (err) {
      console.error('获取Power BI令牌失败', err);
    }
  };

  useEffect(() => {
    // 组件挂载首次拉取令牌
    fetchPowerBIToken();
    // 每55分钟刷新一次令牌，提前5分钟避免过期
    const refreshTimer = setInterval(fetchPowerBIToken, 55 * 60 * 1000);

    return () => clearInterval(refreshTimer);
  }, []);

  // 令牌更新后主动调用SDK方法更新
  useEffect(() => {
    if (accessToken && reportRef.current) {
      reportRef.current.updateAccessToken(accessToken)
        .catch(err => console.error('更新令牌失败', err));
    }
  }, [accessToken]);

  // 令牌未获取到前展示加载态
  if (!accessToken) return <div>加载中...</div>;

  return (
    <PowerBIEmbed
      embedConfig={{
        type: 'report', 
        id: 'xxxxx',
        embedUrl: "xxxxx",
        accessToken: accessToken,
        tokenType: models.TokenType.Aad,
        settings: {
          panes: {
            filters: {
              expanded: false,
              visible: false
            }
          },
          background: models.BackgroundType.Transparent,
        }
      }}
      eventHandlers={
        new Map([
          ['loaded', function () { console.log('Report loaded'); }],
          ['rendered', function () { console.log('Report rendered'); }],
          ['error', function (event) { console.log(event.detail); }]
        ])
      }
      cssClassName={"Embed-container"}
      getEmbeddedComponent={(embeddedReport) => {
        reportRef.current = embeddedReport;
      }}
    />
  );
};

export default PowerBIReport;

补充注意事项 #

• 如果是应用所有权数据的嵌入场景，建议使用Power BI 嵌入令牌（models.TokenType.Embed）而非AAD令牌，可更细粒度控制权限、有效期，安全性更高。
• 生产环境需要给后端的令牌接口添加权限校验，只有有权限查看对应报告的用户才能获取到令牌。

内容的提问来源于stack exchange，提问作者J.Kalpa