令牌过期后如何刷新 powerbi-client-react 组件？

Question

我正在测试一个 React Web 应用程序，可以在其中显示来自 Power BI 的报告。我正在使用 powerbi-client-react 嵌入报告。但是，当我加载带有过期令牌的组件时，我遇到了一个问题，我收到此错误：。

因此，每当发生这种情况时，我都会使用错误事件处理程序捕获它，获取新令牌并更新 powerbi 报告 accessToken。但是，当我在反应中设置新的 accessToken 时，它似乎没有重新加载/刷新嵌入。它只显示上面的屏幕截图。

.

有没有办法使用新的访问令牌强制刷新嵌入组件？或者我的方法不正确？任何错误指示将不胜感激。

import React from 'react';
import {models} from 'powerbi-client';
import {PowerBIEmbed} from 'powerbi-client-react';

// Bootstrap config
let embedConfigTest = {
  type: 'report', // Supported types: report, dashboard, tile, visual and qna
  id: reportId,
  embedUrl: powerBIEmbedURL,
  accessToken: null,
  tokenType: models.TokenType.Embed,
  pageView: 'fitToWidth',
  settings: {
    panes: {
      filters: {
        expanded: false,
        visible: false,
      },
    },
    background: models.BackgroundType.Transparent,
  },
};

const PowerBiReport = ({graphName, ...props}) => {
  let [embedToken, setEmbedToken] = React.useState();
  let [embedConfig, setEmbedConfig] = React.useState(embedConfigTest);

  React.useEffect(
    () => {
      setEmbedToken(EXPIRED_TOKEN);
      setEmbedConfig({
        ...embedConfig,
        accessToken: EXPIRED_TOKEN, // Initiate with known expired token
      });
    },
    [graphName]
  );

  const changeSettings = (newToken) => {
    setEmbedConfig({
      ...embedConfig,
      accessToken: newToken, 
    });
  };

  // Map of event handlers to be applied to the embedding report
  const eventHandlersMap = new Map([
    [
      'loaded',
      function() {
        console.log('Report has loaded');
      },
    ],
    [
      'rendered',
      function() {
        console.log('Report has rendered');
      },
    ],
    [
      'error',
      async function(event, embed) {
        if (event) {
          console.error(event.detail);
          console.log(embed);
          // Simulate getting a new token and update
          setEmbedToken(NEW_TOKEN);
          changeSettings(NEW_TOKEN);
        }
      },
    ],
  ]);

  return (
    <PowerBIEmbed
      embedConfig={embedConfig}
      eventHandlers={eventHandlersMap}
      cssClassName={'report-style-class'}
    />
  );
};

export default PowerBiReport;

Answer 1

谢谢@vtCode。这是一个示例，但刷新只能以 15 秒的间隔进行。

import { PowerBIEmbed } from "powerbi-client-react";

export default function PowerBiContainer({ embeddedToken }) {
    const [report, setReport] = useState(null);
    useEffect(() => {
    if (report == null) return;
    report.refresh();
    }, [report, embeddedToken]);

    return (
        <PowerBIEmbed
        embedConfig={{ ...embedConfig, accessToken: embeddedToken }}
        getEmbeddedComponent={(embeddedReport) => setReport(embeddedReport)};
        />
    );
}

或者，您可以添加 React“key”属性，该属性会在 embededToken 更改时重新挂载组件

<PowerBIEmbed key={embeddedToken} 
embedConfig={{ ...embedConfig, accessToken: embeddedToken }}
/>

Answer 2

我最终解决了这个问题，虽然不是那么漂亮。

我检查了 powerbi-client wiki，因为它依赖于它，并发现您可以在我从错误函数获得的

embed.reload()

对象中使用

embed

。

由于某种原因（我无法找出原因），错误处理程序被触发两次，因此为了避免刷新令牌两次，我必须创建一个对话框，通知用户令牌已过期，每当该对话框关闭时，我重新加载 powerbi 报告。

确切的维基参考：

1. 覆盖错误体验
2. 重新加载报告
3. 更新嵌入令牌

Answer 3

发生这种情况是因为 powerbi-client-react 没有对其输入的更改做出反应。

相反，获取报表对象：

getEmbeddedComponent={(embeddedReport) => setReport(embeddedReport)};

然后使用报告更新设置：

await report.updateSettings(<entire settings object with tokens, etc>)