Web: Fixed the download and preview file not authorized. (#3652)

https://github.com/infiniflow/ragflow/issues/3651

### What problem does this PR solve?

_Briefly describe what this PR aims to solve. Include background context
that will help reviewers understand the purpose of the PR._

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/document-viewer/hooks.ts

@@ -1,3 +1,5 @@
+import { Authorization } from '@/constants/authorization';
+import { getAuthorization } from '@/utils/authorization-util';
 import jsPreviewExcel from '@js-preview/excel';
 import axios from 'axios';
 import mammoth from 'mammoth';
@@ -23,7 +25,12 @@ export const useCatchError = (api: string) => {
 
 export const useFetchDocument = () => {
   const fetchDocument = useCallback(async (api: string) => {
-    const ret = await axios.get(api, { responseType: 'arraybuffer' });
+    const ret = await axios.get(api, {
+      headers: {
+        [Authorization]: getAuthorization(),
+      },
+      responseType: 'arraybuffer',
+    });
     return ret;
   }, []);
 
@@ -64,30 +71,34 @@ export const useFetchExcel = (filePath: string) => {
 
 export const useFetchDocx = (filePath: string) => {
   const [succeed, setSucceed] = useState(true);
+  const [error, setError] = useState<string>();
   const { fetchDocument } = useFetchDocument();
   const containerRef = useRef<HTMLDivElement>(null);
-  const { error } = useCatchError(filePath);
 
   const fetchDocumentAsync = useCallback(async () => {
-    const jsonFile = await fetchDocument(filePath);
-    mammoth
-      .convertToHtml(
-        { arrayBuffer: jsonFile.data },
-        { includeDefaultStyleMap: true },
-      )
-      .then((result) => {
-        setSucceed(true);
-        const docEl = document.createElement('div');
-        docEl.className = 'document-container';
-        docEl.innerHTML = result.value;
-        const container = containerRef.current;
-        if (container) {
-          container.innerHTML = docEl.outerHTML;
-        }
-      })
-      .catch(() => {
-        setSucceed(false);
-      });
+    try {
+      const jsonFile = await fetchDocument(filePath);
+      mammoth
+        .convertToHtml(
+          { arrayBuffer: jsonFile.data },
+          { includeDefaultStyleMap: true },
+        )
+        .then((result) => {
+          setSucceed(true);
+          const docEl = document.createElement('div');
+          docEl.className = 'document-container';
+          docEl.innerHTML = result.value;
+          const container = containerRef.current;
+          if (container) {
+            container.innerHTML = docEl.outerHTML;
+          }
+        })
+        .catch(() => {
+          setSucceed(false);
+        });
+    } catch (error: any) {
+      setError(error.toString());
+    }
   }, [filePath, fetchDocument]);
 
   useEffect(() => {

web/src/pages/document-viewer/pdf/index.tsx

@@ -1,7 +1,14 @@
+import { Authorization } from '@/constants/authorization';
+import { getAuthorization } from '@/utils/authorization-util';
 import { Skeleton } from 'antd';
 import { PdfHighlighter, PdfLoader } from 'react-pdf-highlighter';
 import FileError from '../file-error';
 import { useCatchError } from '../hooks';
+type PdfLoaderProps = React.ComponentProps<typeof PdfLoader> & {
+  httpHeaders?: Record<string, string>;
+};
+
+const Loader = PdfLoader as React.ComponentType<PdfLoaderProps>;
 
 interface IProps {
   url: string;
@@ -10,11 +17,14 @@ interface IProps {
 const PdfPreviewer = ({ url }: IProps) => {
   const { error } = useCatchError(url);
   const resetHash = () => {};
-
+  const httpHeaders = {
+    [Authorization]: getAuthorization(),
+  };
   return (
     <div style={{ width: '100%', height: '100%' }}>
-      <PdfLoader
+      <Loader
         url={url}
+        httpHeaders={httpHeaders}
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
         errorMessage={<FileError>{error}</FileError>}
@@ -37,7 +47,7 @@ const PdfPreviewer = ({ url }: IProps) => {
             />
           );
         }}
-      </PdfLoader>
+      </Loader>
     </div>
   );
 };