Security News
Input Validation Vulnerabilities Dominate MITRE's 2024 CWE Top 25 List
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
@alitajs/access-layout
Advanced tools
使用 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 使用,可以不指定权限判断数据
accessLayout: {
iconNames: ['smile'], // 约定式用法,需要将所有用到的 icon 名称写全,为了按需加载
useModel: true, // 声明是否搭配了 plugin-model 使用
}
export const accessLayout = {
title: 'Runtime Demo',
// Pro-Layout 支持的所有配置
};
useEffect(() => {
setLayoutConfig({
title: 'PageSetDemo',
// Pro-Layout 支持的所有配置
});
}, []);
import { useModel } from 'umi';
const { access } = useModel('@@accessLayout');
if (access.canAdmin) {
// canAdmin 在src/access 中定义
// 或者使用 setAccess 设置
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,
},
];
// src/layouts/index
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,
},
];
// 这个数据会传递给 src/access.ts
// 搭配 plugin-initial-state 使用的话,这个可以不传
const initState = {
currentUser: {
access: 'admin',
},
};
return (
<AccessLayout
initState={initState}
menuData={serveMenuData}
{...props}
></AccessLayout>
);
};
export default BasicLayout;
FAQs
@umijs/access-layout
We found that @alitajs/access-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.