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

【问题标题】：How to refresh powerbi-client-react component once token has expired?令牌过期后如何刷新 powerbi-client-react 组件？
【发布时间】：2021-03-03 06:31:23
【问题描述】：

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

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

Error log screenshot.

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

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;

【问题讨论】：

标签： reactjs powerbi powerbi-embedded

【解决方案1】：

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

我检查了powerbi-client wiki，因为它依赖于它，发现您可以在我从错误函数获得的embed 对象中使用embed.reload()。

由于某种原因（我不知道为什么），错误处理程序被触发了两次，所以为了避免两次刷新令牌，我必须创建一个对话框来通知用户令牌已过期以及该对话框何时关闭，我重新加载 powerbi 报告。

准确的维基参考：

【讨论】：

【解决方案2】：

感谢@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 }}
/>

【讨论】：