src/components/AuthButton.jsx

import {useContext} from "react";
import { UserContext } from "../context/UserContext";
import toast from "react-hot-toast";
const AuthButton = ({children, roles,onClick, ...rest }) => {
    const {user} = useContext(UserContext);
    const {levelRole} = user;
    
    let clickFunc = onClick
    if(!roles || roles.length === 0 || roles.includes(levelRole)){
      clickFunc = onClick;
    }else{
        clickFunc = (e) => {
            e.preventDefault();
            toast.error("等级不足，无法执行此操作");
        }
    }
   
    return (
        <button onClick={clickFunc} {...rest}>
            {children}
        </button>
    )
}
export default AuthButton;