@umijs/plugin-access-layout
使用
使用 npm:
$ npm install --save-dev @umijs/plugin-access-layout
或者使用 yarn:
$ yarn add @umijs/plugin-access-layout --dev
说明
这个插件将 plugin-access 和 plugin-layout 插件的功能整合在一起,为了支持 Umi 的约定式用法,还有更多的动态设置方案。
特性
1、支持约定式和配置式 2、动态修改权限 3、动态使用菜单 4、支持运行时配置 Pro-Layout 5、支持页面级别配置 Pro-Layout 6、支持页面级权限 7、支持页面级修改权限 8、支持不使用 Pro-layout 9、兼容 Pro 旧项目的写法
搭配其他插件
1、配套 plugin-locale 使用,会默认开始国际化的菜单 2、配合 plugin-model 使用,可以使用 useModel('@@accessLayout') 3、配合 plugin-initial-state 使用,可以不指定权限判断数据
Config 配置
accessLayout: {
iconNames: ['smile'],
useModel: true,
}
运行时配置
export const accessLayout = {
title: 'Runtime Demo',
};
页面级配置
useEffect(() => {
setLayoutConfig({
title: 'PageSetDemo',
});
}, []);
页面级别权限控制
import { useModel } from 'umi';
const { access } = useModel('@@accessLayout');
if (access.canAdmin) {
console.log('access.canAdmin');
}
页面级修改权限
import { useModel } from 'umi';
const IndexPage: FC<PageProps> = ({ index, dispatch }) => {
const { setAccess } = useModel('@@accessLayout');
return (
<div
className={styles.center}
onClick={() => setAccess({ canAdmin: false })}
>
点击操作权限
</div>
);
};
扩展菜单配置
可以指定部分页面不使用 layout
const menuData = [
{
path: '/login',
hideLayout: true,
},
];
支持约定式路由用法
import { AccessLayout } from 'umi';
const BasicLayout = props => {
const serveMenuData = [
{
path: '/',
name: 'index',
icon: 'smile',
},
{
path: '/ListTableList',
name: 'list',
icon: 'heart',
access: 'canAdmin',
},
{
path: '/login',
hideLayout: true,
},
];
const initState = {
currentUser: {
access: 'admin',
},
};
return (
<AccessLayout
initState={initState}
menuData={serveMenuData}
{...props}
></AccessLayout>
);
};
export default BasicLayout;