按钮权限整理

src/access.ts

@@ -16,5 +16,9 @@ export default function access(initialState: {
       }
       return routeList.includes(route.name);
     },
+    canShowButton: (buttonName) => {
+      // return true;
+      return routeList.includes(buttonName);
+    },
   };
 }

src/components/RightContent/AvatarDropdown.tsx

@@ -7,7 +7,7 @@ import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import RoutePath from '@/routes/routePath';
-import { CACHE_TOKEN } from '@/constants/cacheKey';
+import { CACHE_TOKEN, CACHE_USERNAME } from '@/constants/cacheKey';
 import ModifyPasswordModal from '@/components/ModifyPassword/ModifyPasswordModal';
 
 export type GlobalHeaderRightProps = {
@@ -23,6 +23,7 @@ const loginOut = async () => {
   // Note: There may be security issues, please note
   if (window.location.pathname !== RoutePath.LOGIN && !redirect) {
     localStorage.removeItem(CACHE_TOKEN);
+    localStorage.removeItem(CACHE_USERNAME);
     history.replace({
       pathname: RoutePath.LOGIN,
       search: stringify({
@@ -66,7 +67,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 
   const currentUser = {
     avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
-    name: 'admin',
+    name: localStorage.getItem(CACHE_USERNAME),
   };
 
   if (!currentUser || !currentUser.name) {

src/components/Table/index.tsx

@@ -12,9 +12,11 @@ import {
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import ProTable, { ProColumns, ActionType, ProTableProps } from '@ant-design/pro-table';
+import { Access, useAccess } from 'umi';
 
 export interface toolBarActionsItem {
   type: 'add' | 'batchDelete';
+  permission?: string;
   text?: string;
   onConfirm: (val?: string[]) => void;
 }
@@ -29,6 +31,8 @@ type Record<K extends keyof any, T> = {
 };
 
 const Table = <T extends Record<string, any>>(props: PropsType) => {
+  const access = useAccess();
+
   const {
     columns: columnsProps = [],
     search: searchProps = {},
@@ -88,7 +92,9 @@ const Table = <T extends Record<string, any>>(props: PropsType) => {
       const optionRender = (_: any, val: any, ...rest: any) => {
         return (
           <Space size={0} split={<Divider type="vertical" />}>
-            {(item.render && (item.render(_, val, ...rest) as []))?.map((item2) => item2)}
+            {(item.render && (item.render(_, val, ...rest) as []))?.map((item2) => {
+              return item2;
+            })}
           </Space>
         );
       };
@@ -165,6 +171,7 @@ const Table = <T extends Record<string, any>>(props: PropsType) => {
       toolBarActions.forEach((item) => {
         if (item.type === 'add') {
           buttonList.push(
+            <Access accessible={access.canShowButton(item.permission)}>
               <Button
                 key="add"
                 type="primary"
@@ -174,10 +181,12 @@ const Table = <T extends Record<string, any>>(props: PropsType) => {
               >
                 <PlusOutlined />
                 {item.text || '添加'}
-            </Button>,
+              </Button>
+            </Access>,
           );
         } else if (item.type === 'batchDelete') {
           buttonList.push(
+            <Access accessible={access.canShowButton(item.permission)}>
               <Button
                 key="del"
                 danger
@@ -186,7 +195,8 @@ const Table = <T extends Record<string, any>>(props: PropsType) => {
                 }}
               >
                 {item.text || '批量删除'}
-            </Button>,
+              </Button>
+            </Access>,
           );
         }
       });

src/constants/cacheKey.ts

@@ -1 +1,2 @@
 export const CACHE_TOKEN = 'token';
+export const CACHE_USERNAME = 'name';

src/pages/Login/index.tsx

@@ -5,7 +5,7 @@ import { useIntl, history, FormattedMessage, useModel } from 'umi';
 import { login } from '@/services/login';
 import defaultSettings from '../../../config/defaultSettings';
 import styles from './index.less';
-import { CACHE_TOKEN } from '@/constants/cacheKey';
+import { CACHE_TOKEN, CACHE_USERNAME } from '@/constants/cacheKey';
 import access from '@/access';
 
 const Login: React.FC = () => {
@@ -13,9 +13,9 @@ const Login: React.FC = () => {
   const { initialState, refresh } = useModel('@@initialState');
   const handleSubmit = async (values: API.LoginParams) => {
     // 登录
-
     const res: any = await login({ ...values });
     localStorage.setItem(CACHE_TOKEN, res.token);
+    localStorage.setItem(CACHE_USERNAME, values.name);
     /** 此方法会跳转到 redirect 参数所在的位置 */
     if (!history) return;
     const { query } = history.location;

src/pages/Nft/NftContract/List/index.tsx

@@ -51,6 +51,7 @@ const Address: React.FC = () => {
           {
             type: 'add',
             text: '新建NFT合约',
+            permission: '新建NFT合约',
             onConfirm: async () => {
               const res = await getContractInfo({ erc: ContractType.NFT721 });
               if (res.bin != '') {

src/pages/Nft/NftToken/List/index.tsx

@@ -50,6 +50,7 @@ const Address: React.FC = () => {
           {
             type: 'add',
             text: '添加NFT',
+            permission: '添加NFT',
             onConfirm: () => {
               setVisible(true);
             },

src/pages/Recharge/CoinType/List/index.tsx

@@ -7,8 +7,10 @@ import AddCoinTypeModal from '../components/AddCoinTypeModal';
 import EditCoinTypeModal from '../components/EditCoinTypeModal';
 import { initWeb3, deployContract, transfer } from '@/utils/web3';
 import { ContractType } from '@/constants/enum/contract';
+import { Access, useAccess } from 'umi';
 
 const CoinTypeList = () => {
+  const access = useAccess();
   const tableRef = useRef<ActionType>();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -51,6 +53,7 @@ const CoinTypeList = () => {
       valueType: 'option',
       width: 150,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('代币编辑')}>
           <a
             key="edit"
             onClick={() => {
@@ -58,7 +61,8 @@ const CoinTypeList = () => {
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
       ],
     },
   ];
@@ -71,6 +75,7 @@ const CoinTypeList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '代币添加',
             onConfirm: () => {
               setIsModalVisible(true);
             },

src/pages/Recharge/Wallet/List/index.tsx

@@ -11,9 +11,11 @@ import { fetchTableData } from '@/utils/table';
 import DeleteButton from '@/components/Table/DeleteButton';
 import AddWalletModal from '../components/AddWalletModal';
 import EditWalletModal from '../components/EditWalletModal';
+import { Access, useAccess } from 'umi';
 
 const CollectionAddressList = () => {
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
@@ -47,6 +49,7 @@ const CollectionAddressList = () => {
       valueType: 'option',
       width: 150,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('收款地址编辑')}>
           <a
             key="edit"
             onClick={() => {
@@ -54,13 +57,16 @@ const CollectionAddressList = () => {
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('收款地址删除')}>
           <DeleteButton
             key="delete"
             onDelete={() => {
               handleDelete(row.address);
             }}
-        />,
+          />
+        </Access>,
       ],
     },
   ];
@@ -73,6 +79,7 @@ const CollectionAddressList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '收款地址添加',
             onConfirm: () => {
               setIsModalVisible(true);
             },

src/pages/Recharge/Withdraw/List/index.tsx

@@ -6,9 +6,11 @@ import ConfirmButton from '@/components/Table/ConfirmButton';
 import moment from 'moment';
 import { WithdrawType } from '@/constants/enum/withdraw';
 import RejectButton from '@/components/Table/RejectButton';
+import { Access, useAccess } from 'umi';
 
 const WithdrawList = () => {
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
 
   const handleClick = async (uuid, status) => {
     await solveWithdraw({ uuid: uuid, status: status });
@@ -81,6 +83,7 @@ const WithdrawList = () => {
       width: 150,
       render: (_, row) => [
         row.status === 30000 ? (
+          <Access accessible={access.canShowButton('提现通过')}>
             <ConfirmButton
               key="confirm"
               title="确认通过提现?"
@@ -89,8 +92,10 @@ const WithdrawList = () => {
                 handleClick(row.uuid, WithdrawType.SUCCESS);
               }}
             />
+          </Access>
         ) : null,
         row.status === 30000 ? (
+          <Access accessible={access.canShowButton('提现拒绝')}>
             <RejectButton
               key="confirm"
               title="确认拒绝提现?"
@@ -99,6 +104,7 @@ const WithdrawList = () => {
                 handleClick(row.uuid, WithdrawType.FAILED);
               }}
             />
+          </Access>
         ) : null,
       ],
     },

src/pages/System/Account/List/index.tsx

@@ -12,6 +12,7 @@ import { Popover, Switch } from 'antd';
 import AddAccountModal from '../components/AddAccountModal';
 import EditAccountModal from '../components/EditAccountModal';
 import { getRoleList } from '@/services/system/role';
+import { Access, useAccess } from 'umi';
 
 const AccountManageList = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -27,6 +28,8 @@ const AccountManageList = () => {
     await deleteUser({ name: name });
   };
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
+
   const columns: ProColumns<any>[] = [
     {
       title: '账号',
@@ -53,14 +56,18 @@ const AccountManageList = () => {
       valueType: 'option',
       width: 180,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('账号编辑')}>
           <a
             key="edit"
+            placeholder=""
             onClick={() => {
               handleEdit(row);
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('账号启用禁用')}>
           <Popover
             content={
               <div>
@@ -76,14 +83,17 @@ const AccountManageList = () => {
                 await changeUserStatus({ name: row.name, status: checked });
               }}
             />
-        </Popover>,
+          </Popover>
+        </Access>,
+        <Access accessible={access.canShowButton('账号删除')}>
           <DeleteButton
             key="delete"
             onDelete={() => {
               handleDelete(row.name);
               tableRef.current?.reload();
             }}
-        />,
+          />
+        </Access>,
       ],
     },
   ];
@@ -96,6 +106,7 @@ const AccountManageList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '账号添加',
             onConfirm: () => {
               setIsModalVisible(true);
             },

src/pages/System/Notice/List/index.tsx

@@ -7,9 +7,11 @@ import { Popover, Switch } from 'antd';
 import AddNoticeModal from '../components/AddNoticeModal';
 import EditNoticeModal from '../components/EditNoticeModal';
 import { NoticeType } from '@/constants/enum/notice';
+import { Access, useAccess } from 'umi';
 
 const NoticeList = () => {
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
@@ -72,6 +74,7 @@ const NoticeList = () => {
       valueType: 'option',
       width: 180,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('通知编辑')}>
           <a
             key="edit"
             onClick={() => {
@@ -79,7 +82,9 @@ const NoticeList = () => {
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('通知启用禁用')}>
           <Popover
             content={
               <div>
@@ -97,14 +102,16 @@ const NoticeList = () => {
               }}
             />
             ,
-        </Popover>,
+          </Popover>
-
+        </Access>,
+        <Access accessible={access.canShowButton('通知删除')}>
           <DeleteButton
             key="delete"
             onDelete={() => {
               handleDelete(row.code);
             }}
-        />,
+          />
+        </Access>,
       ],
     },
   ];
@@ -117,6 +124,7 @@ const NoticeList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '通知添加',
             onConfirm: () => {
               setIsModalVisible(true);
             },

src/pages/System/Permissions/List/index.tsx

@@ -6,6 +6,7 @@ import { getPermission, upsertPermission } from '@/services/system/permission';
 import AddPermissionModal from '../components/AddPermissionModal';
 import EditPermissionModal from '../components/EditPermissionModal';
 import { message } from 'antd';
+import { Access, useAccess } from 'umi';
 
 const PermissionsList = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -17,6 +18,7 @@ const PermissionsList = () => {
   const [rowData, setRowData] = useState({});
 
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
 
   const handleAdd = (row: any) => {
     setRowData(row);
@@ -111,6 +113,7 @@ const PermissionsList = () => {
       valueType: 'option',
       width: 180,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('权限添加')}>
           <a
             key="add"
             onClick={() => {
@@ -119,7 +122,9 @@ const PermissionsList = () => {
             }}
           >
             添加
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('权限编辑')}>
           <a
             key="edit"
             onClick={() => {
@@ -128,14 +133,17 @@ const PermissionsList = () => {
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
         Object.prototype.hasOwnProperty.call(row, 'children') ? null : (
+          <Access accessible={access.canShowButton('权限删除')}>
             <DeleteButton
               key="delete"
               onDelete={() => {
                 handleDelete(row);
               }}
             />
+          </Access>
         ),
       ],
     },
@@ -151,6 +159,7 @@ const PermissionsList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '权限添加',
             onConfirm: () => {
               setIsAddFirst(true);
               setIsModalVisible(true);

src/pages/System/Role/List/index.tsx

@@ -6,9 +6,11 @@ import DeleteButton from '@/components/Table/DeleteButton';
 import AddRoleModal from '../components/AddRoleModal';
 import EditRoleModal from '../components/EditRoleModal';
 import AuthPermissionsDrawer from '../components/AuthPermissionsDrawer';
+import { Access, useAccess } from 'umi';
 
 const RoleList = () => {
   const tableRef = useRef<ActionType>();
+  const access = useAccess();
 
   const [isDrawerVisible, setIsDrawerVisible] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -47,6 +49,7 @@ const RoleList = () => {
       valueType: 'option',
       width: 180,
       render: (_, row) => [
+        <Access accessible={access.canShowButton('角色编辑')}>
           <a
             key="edit"
             onClick={() => {
@@ -54,7 +57,9 @@ const RoleList = () => {
             }}
           >
             编辑
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('角色授权')}>
           <a
             key="auth"
             onClick={() => {
@@ -62,13 +67,16 @@ const RoleList = () => {
             }}
           >
             授权
-        </a>,
+          </a>
+        </Access>,
+        <Access accessible={access.canShowButton('角色删除')}>
           <DeleteButton
             key="delete"
             onDelete={() => {
               handleDelete(row.id);
             }}
-        />,
+          />
+        </Access>,
       ],
     },
   ];
@@ -82,6 +90,7 @@ const RoleList = () => {
         toolBarActions={[
           {
             type: 'add',
+            permission: '角色添加',
             onConfirm: () => {
               setIsModalVisible(true);
             },

src/pages/System/SecretKey/index.tsx

@@ -2,10 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { Button, Input, Popconfirm } from 'antd';
 import styles from './index.less';
 import { createSecretKey, getSecretKey } from '@/services/system/secretKey';
+import { Access, useAccess } from 'umi';
 
 const { TextArea } = Input;
 
 const SecretKey: React.FC = () => {
+  const access = useAccess();
   const [secretKey, setSecretKey] = useState('');
 
   const create = async () => {
@@ -24,11 +26,13 @@ const SecretKey: React.FC = () => {
 
   return (
     <div className={styles.container}>
+      <Access accessible={access.canShowButton('创建密钥')}>
         <Popconfirm title="确定创建密钥?" onConfirm={create} okText="确定" cancelText="取消">
           <Button className={styles.button} type="primary">
             创建密钥
           </Button>
         </Popconfirm>
+      </Access>
 
       <TextArea className={styles.textarea} rows={16} value={secretKey} />
     </div>