如何使用发送授权数据(jwt令牌)在react应用程序中呈现iframe?这样对吗?iframe是否有替代方案?

9bfwbjaz  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(301)

我正在尝试使用自定义按钮在我的应用程序中呈现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不是最好的方法?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题