0.0.1
tango-pdf-cw is a media preview library for permission control. The
usePreview hook function is used for the safe display of restricted resources (such as PDF, images, documents, etc.). It determines whether access to resources is allowed by detecting the user role, whether the token is valid, and the resource expiration time, and provides clear access status (such as hasAccess, errorType, etc.) to facilitate the UI to make corresponding processing.When access fails, the
errorType field will provide the reason for the failure (such as missing Token, insufficient permissions, or Token expired), and a callback function will be provided, which can be used to prompt the user or jump to the login page, etc.<PDFViewer /> The tag is used to quickly display media files, and the display style can be adjusted through the sx attribute, etc.How to use?
1.Installation
npm i tango-pdf-cw2.Import
import { usePreview, PDFViewer } from "tango-pdf-cw";3.Use
// react
import { useState } from "react";
import { usePreview, PDFViewer } from "tango-pdf-cw";
import { Button, useNotice } from "tango-ui-cw";
import pdftest from "@/assets/yourpdf.pdf";
function Demo() {
const [role, setRole] = useState("admin");
const [token, setToken] = useState("123");
const notice = useNotice();
const { finalUrl, errorType } = usePreview({
src: pdftest,
token: token,
userRole: role,
allowRoles: ["admin"],
onAuthFail: (errorType) => {
console.log("error,reason:", errorType);
},
});
if (errorType === "NO_TOKEN") return notice.fail('no token');
if (errorType === "ROLE_FORBIDDEN") return notice.fail('no access');
if (errorType === "EXPIRED") return notice.fail('the token has expired');
return (
<>
<PDFViewer src={finalUrl} sx={{ h: 800 }} />
</>
);
}
export default Demo;
PDF Demo
Currently role: Admin
usePreview Tokens
usePreview Props
PDFViewer Props