如何授权使用react-pdf？

Question

我必须在我的应用程序中显示一些 pdf 内容，但 pdf 源来自后端，用户必须经过身份验证才能查看 pdf。
如果我使用 iframe 标签，pdf 渲染没有问题，但如果我尝试使用react-pdf，则会收到 401 未经授权的错误。
我认为 iframe 标记会自动处理请求的令牌。
我如何使用react-pdf来管理这个？
我无权访问前端的cookie/令牌（全部由后端处理）。

我的用于显示pdf文件的代码：

import { Box, Button } from "@mui/material";
import { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url,
).toString();

interface IPdfViewerProps {
  url: string;
}

const PdfViewer = ({ url }: IPdfViewerProps) => {
  const [totalPages, setTotalPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);
  const [pageScale, setPageScale] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setTotalPages(numPages);
  }

  function handleZoomIn() {
    if (pageScale < 3) {
      setPageScale(pageScale + 0.2);
    }
  }

  function handleZoomOut() {
    if (pageScale > 0.3) {
      setPageScale(pageScale - 0.2);
    }
  }

  function handleNext() {
    if (pageNumber < totalPages) {
      setPageNumber(pageNumber + 1);
    }
  }
  function handlePrevious() {
    if (pageNumber > 0) {
      setPageNumber(pageNumber - 1);
    }
  }

  return (
    <Box className="App">
      <Box className="page-container">
        <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
          <Page pageNumber={pageNumber} scale={pageScale} />
        </Document>
      </Box>
      <Box className="footer">
        <Box className="button-container">
          <Button onClick={handleZoomIn} disabled={pageScale >= 3}>
            Zoom +
          </Button>
          <Button onClick={handleZoomOut} disabled={pageScale <= 0.3}>
            Zoom -
          </Button>
        </Box>
        <Box className="page-text">
          Page {pageNumber} of {totalPages}
        </Box>
        <Box className="button-container">
          <Button onClick={handlePrevious} disabled={pageNumber === 1}>
            ‹ Previous
          </Button>
          <Button onClick={handleNext} disabled={pageNumber === totalPages}>
            Next ›
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default PdfViewer;

仍然可以使用react-pdf还是我需要保留iframe标签？
使用 iframe 标签显示 pdf 文件是一个好习惯吗？
所有 pdf 文件都来自 API，而不是来自用户。

Answer 1

我弄清楚了如何在授权下使用react-pdf。
我在文档中错过了它。

我必须添加 withCredentials 选项，默认情况下为 false。

   <Document file={url} onLoadSuccess={onDocumentLoadSuccess} options={{ withCredentials: true }}>
       <Page pageNumber={pageNumber} scale={pageScale} renderTextLayer={false} />
    </Document>

我现在面临的问题是每次页面更改时都会重新获取pdf。

pdf处于某种状态，所以我不知道为什么它重新获取文档。