import { Tooltip } from 'antd';
import React from 'react';
import { useLocation } from 'react-router-dom';
interface IndexProps {
  scopeTtype:string, // 權(quán)限碼
  children:any// 子組件
}
const Index: React.FC<IndexProps> = (props) => {
  // 獲取當(dāng)前頁(yè)面的位置信息、
  const routeDom = useLocation(); 
  // 從本地緩存讀取 頁(yè)面路徑和權(quán)限數(shù)據(jù)
  const strPersstion = localStorage.getItem('pagePersstion');
  const pagePersstion = JSON.parse(strPersstion as string); 
  // 找到當(dāng)前頁(yè)的按鈕權(quán)限數(shù)據(jù)
  const currentPerssion = pagePersstion.find((item: { page: string; })=>item.page == routeDom.pathname);
  console.log('當(dāng)前頁(yè)面的按鈕權(quán)限',currentPerssion);
  //  有權(quán)限返回按鈕
  if(currentPerssion.permissions[props.scopeTtype]){
    return  props.children;
  }else{ 
    // 沒(méi)有則禁用、或者隱藏按鈕
    // 要實(shí)現(xiàn)按鈕禁用，需要設(shè)置組件的disabled 
    // 可是react 中的props是只讀無(wú)法修改，如何修改props中子組件呢？
    // 通過(guò)React API React.cloneElement 克隆出新的元素進(jìn)行修改如下
    const Button = React.cloneElement(props.children, {
      disabled: true
    });
    return   <>
      <Tooltip title="暫無(wú)權(quán)限">  {Button}</Tooltip>
    </>;
  };
};
export default Index;

<AuthButton scopeTtype="isDelete">
  <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
    批量刪除
  </Button>
</AuthButton>
<AuthButton scopeTtype="isAdd">
    <Button onClick={showModal}>新增員工</Button>
</AuthButton>

{
  path: '/imgMove/:id',
    name: 'imgMove',
    meta: {
    itwangtianAuth: true
    // 此頁(yè)面是否token校驗(yàn)
  },
  component: imgMove
}

// 在 Vue 組件中獲取路由的 meta 數(shù)據(jù)
export default {
  name: 'ExampleComponent',
  mounted() {
    // 獲取當(dāng)前路由對(duì)應(yīng)的路由記錄
    const route = this.$route; 
    // 獲取該路由記錄的 meta 數(shù)據(jù)
    const meta = route.meta; 
    // 使用 meta 數(shù)據(jù)
    console.log(meta.itwangtianAuth); 
  }
}

<Route
  path="/dashboard"
  element={<Dashboard />}
  title="Dashboard"
  requiresAuth={true}
  />

import { useRoutes, useParams, useNavigate } from 'react-router-dom';
function Dashboard() {
  const params = useParams();
  const navigate = useNavigate();
  // 訪問(wèn)路由傳遞的屬性
  const { title, requiresAuth } = useRoutes().pathname;
  // 在這里使用元信息進(jìn)行邏輯處理
  return (
    <div>
      <h1>{title}</h1>
      {/* 組件的其余部分 */}
    </div>
  );
}