// AuthBtn
import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';
const AuthBtn: React.FC<{}> = (props) => {
let { authId, children } = props;
// btnIds 应该有后台接口返回,告诉前端用户有哪些按钮权限
let btnIds = ['read', 'edit'];
let hasAuth = btnIds.includes(authId);
// 这里可以根据实际需求封装
return <Button disabled={!hasAuth}>{children}</Button>;
};
export default AuthBtn;
// index.ts
<AuthBtn authId="read">read 只读权限</AuthBtn>
<AuthBtn authId="write">write 写入权限</AuthBtn>
作者:胖达 n
链接:
https://juejin.cn/post/6959834563895902245来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。