我正在使用React使用PowerBI创建报告仪表板,需要将嵌入令牌值传递到我们创建的后端端点,然后将该新值传递到PowerBI嵌入组件中以正确显示报告。
如果我手动放置嵌入令牌值,那么我的应用程序将正常工作,但是由于多种原因(例如,安全性和耗时),这不是理想的,所以我试图在React应用程序中使其自动化。
我们如何通过switch语句手动显示报告,因为有多个报告可供选择,每个报告都放置了PowerbiEmbedded组件,并从本地JSON文件中提取了适当的值,该本地JSON文件中放置了报告ID和嵌入URL。这是我粘贴令牌以进行测试/概念验证的同一文件,并且具有一个单独的组件来处理获取请求(以下为RequestToken.js),并且在如何将其与ReportDashboard.js连接方面有所遗漏,因为这就是显示的处理方式每个报告。
任何建议和帮助,将不胜感激!
RequestToken.js
import React from "react"
import { groupVariables } from '../constants/reportVariables';
// This will handle token retrieval for each
class RequestAccessToken extends React.Component {
state = {
isLading: true,
tokenDetails: [],
error: null
};
getTokenDetails() {
// where we're fetching data from b2b for proof of concept
axios.get(`/api/token/${accessToken}`)
// got the API response and receive data in JSON format
.then(response =>
response.data.results.map(tokenDetail => ({
token: `${tokenDetail.token}`
}))
)
.then(tokenDetails => {
this.setState({
tokenDetails,
isLoading: false
});
})
// catch any errors we hit and update the output
.catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
this.getTokenDetails();
}
render() {
const { isLoading, tokenDetails } = this.state;
return (
<React.Fragment>
{!isLoading ? (
tokenDetails.map(tokenDetail => {
const { token } = tokenDetail
return (
console.log(tokenDetail)
);
})
// If there is a delay in data, let's let the user know it's loading
) : (
<h3>Loading...</h3>
)}
</React.Fragment>
);
}
}
ReportDashboard.js
import React from 'react';
import { reportVariables } from '../constants/reportVariables.js';
import PowerbiEmbedded from 'react-powerbi'
function Reporting({ activeView }) {
// configure the reportIds and report name in constants/reportVariables.js
let reportData;
switch(activeView){
case 'Business to Consumer':
reportData = <div>
<PowerbiEmbedded
id={reportVariables.reportIds.b2c}
embedUrl={reportVariables.reportURL.b2c}
accessToken={reportVariables.reportToken.b2c}
filterPaneEnabled={false}
navContentPaneEnabled={false}
embedType={`report`}
tokenType={`Embed`}
permissions={`All`}
/>
</div>
break;
case 'Business to Business':
reportData = <div>
<PowerbiEmbedded
id={reportVariables.reportIds.b2b}
embedUrl={reportVariables.reportURL.b2b}
accessToken={reportVariables.reportToken.b2b}
filterPaneEnabled={false}
navContentPaneEnabled={false}
embedType={`report`}
tokenType={`embed`}
permissions={`All`}
/>
</div>
break;
case 'Agent':
reportData = <div>
<PowerbiEmbedded
id={reportVariables.reportIds.agent}
embedUrl={reportVariables.reportURL.agent}
accessToken={reportVariables.reportToken.agent}
filterPaneEnabled={false}
navContentPaneEnabled={false}
embedType={`report`}
tokenType={`embed`}
permissions={`All`}
/>
</div>
break;
case 'A/B Testing':
reportData = <div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lcGoWfXLRpc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
break;
default:
break;
}
return(
<div className='frameDiv'>
<style>{`
.frameDiv{
justify-content: center;
display: flex;
align-items: center;
width: 85vw;
height: calc(100vh - 39px);
background: #ccc;
}
.powerbi-frame {
width: 85vw;
height: calc(100vh - 39px);
}
`}
</style>
{reportData}
</div>
);
}
export default Reporting
somewhere对吗?到目前为止,它只是坐在那里。将其导入到仪表板组件中并进行渲染,然后您就可以在其中访问令牌。