我正在尝试使用自定义按钮在我的应用程序中呈现jupyter服务。我分析的最好的方法是现在我尝试使用来呈现这个服务。但在这里,我通过jwt令牌配置了授权,我不知道如何从iframe发送令牌进行授权。在我的react应用程序中,我尝试了一些不同的方法,但它们不起作用:
import AuthIFrame from 'react-auth-iframe';
import Iframe from 'react-iframe';
const frameRef = useRef(null)
const renderIframe = (frame) => {
console.log('frame', frame.current);
if (!frame.current) {
return;
}
// frame.current.setAttribute('src', workflow.url);
// React.findDOMNode(this.refs.frame).setAttribute('src', workflow.url);
// frame.setAttribute('src', workflow.url);
// if (workflow && workflow.url) {
// const doc = frame.current.contentDocument;
// doc.open();
// const src = workflow.url;
// const token = localStorage.getItem('token');
// console.log('token', token);
// const method = 'GET';
// const authorization = `Bearer ${token}`;
// const myHeaders = new Headers();
// myHeaders.append('Authorization', authorization);
// myHeaders.append('Content-Type', 'application/json');
// myHeaders.get('Content-Type'); // Returns 'image/jpeg'
// const options = { method, myHeaders };
// fetch(src, options)
// .then((response) => {
// console.log('response', response);
// setIframeIsReady(true);
// frame.setAttribute('src', response.url);
// frame.setAttribute('url', response.url);
// frame.url = response.url;
// })
// .catch(() => setIframeIsReady(false));
// }
};
{/*<Iframe url={workflow.url} width='100%' id='iframe' height='450px' className={`workflow-body-left-iframe ${iframeIsReady ? '' : ''}`} display='initial' onLoad={() => loadRefHandler()} />*/}
{/*<iframe src={''} id='iframe' width='100%' scrolling='no' height='450px' className={`workflow-body-left-iframe ${iframeIsReady ? '' : ''}`} display='initial' frameBorder='0' ref={frameRef}></iframe>*/}
{/*<AuthIFrame token={localStorage.token} type='text/html' ref={frameRef} />*/}
<Iframe
src={workflow.url}
headers={{
Authorization: `Bearer ${localStorage.getItem('token')}`,
type: 'text/html',
}}
/>
(仅部分代码)如何执行此操作?也许iframe不是最好的方法?
暂无答案!
目前还没有任何答案,快来回答吧!