React中MSAL获取的AccessToken无法渲染Power BI报表问题

我用React JS构建Web应用，通过Microsoft MSAL JS库实现了用户认证，现在尝试用powerbi-client-react库嵌入Power BI报表。将认证后获取的AAD Access Token存入变量并传递给<PowerBIEmbed/>组件时，报表无法显示；但硬编码该Token就能正常展示，已排除权限问题。排查时出现403错误：

{message: 'LoadReportFailed', detailedMessage: 'Fail to initialize - Could not resolve cluster', errorCode: '403', level: 6, technicalDetails: {…}}

预期实现通过Token变量渲染目标报表。

相关代码片段 #

authConfig.js #

export const pbiToken = {
    scopes: ["https://analysis.windows.net/powerbi/api/Report.Read.All"],
}

EmbedReport组件代码 #

import React, { useState, useEffect } from 'react';

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
import { pbiToken } from '../authConfig';
import { useMsal } from '@azure/msal-react';

export const EmbedReport = (props) => {
  const [powerBIAccessToken, setPowerBIAccessToken] = useState(null);
  const reportId = props.reportId;
  const embedUrl = props.embedUrl;
  const { instance, accounts } = useMsal();

  const getPowerBIToken = async () => {
    try {
      const response = await instance.acquireTokenSilent({
        scopes: pbiToken.scopes,
        account: accounts[0],
      });
      if (response.accessToken) {
        console.log("reading token", response.accessToken);
        setPowerBIAccessToken(JSON.stringify(response.accessToken));
      }
    } catch (error) {
      console.error("Error acquiring Power BI token:", error);
    }
  };

  useEffect(() => {
    const isLoggedIn = accounts.length > 0;
    if (isLoggedIn) {
      getPowerBIToken();
    }
  }, [accounts.length]);

  return (
    <>
      {powerBIAccessToken ? (
        <PowerBIEmbed
          embedConfig={{
            type: "report",
            id: reportId,
            embedUrl: embedUrl.href,
            accessToken: powerBIAccessToken,
            tokenType: models.TokenType.Aad,
            settings: {
              panes: {
                filters: {
                  expanded: false,
                  visible: false,
                },
              },
              background: models.BackgroundType.Transparent,
            },
          }}
          eventHandlers={
            new Map([
              [
                "rendered",
                function () {
                  console.log("Report rendered");
                },
              ],
              [
                "error",
                function (event) {
                  console.log(event.detail);
                },
              ],
              ["visualClicked", () => console.log("visual clicked")],
            ])
          }
          cssClassName={"reportClass"}
          getEmbeddedComponent={(embeddedReport) => {
            window.report = embeddedReport;
          }}
        />
      ) : (
        <p>'hello'</p>
      )}
    </>
  );
};

export default EmbedReport;

问题核心在于JSON.stringify(response.accessToken)这一步：Access Token本身就是字符串类型，用JSON.stringify会给它额外包裹一层双引号，导致Power BI服务无法识别该Token，最终返回403错误。

修复步骤 #

1. 移除不必要的JSON.stringify
   修改getPowerBIToken函数中的赋值逻辑，直接将原始Token赋值给状态变量：

if (response.accessToken) {
  console.log("reading token", response.accessToken);
  setPowerBIAccessToken(response.accessToken); // 去掉JSON.stringify
}

2. 优化useEffect依赖项
   将useEffect的依赖项从accounts.length改为accounts，避免因数组长度相同但内容变化时不触发函数的问题：

useEffect(() => {
  const isLoggedIn = accounts.length > 0;
  if (isLoggedIn) {
    getPowerBIToken();
  }
}, [accounts]); // 改为监听accounts数组

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