一、启用方式
配置开启config/config.ts。同时需要 src/access.ts 提供权限配置
export default {
access: {},
// access 插件依赖 initial State 所以需要同时开启
initialState: {},
};
这里以扩展的路由配置为例,配置只有admin权限才能查看的页面
1、在src/access.ts文件定义权限
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
const { currentUser } = initialState ?? {};
return {
canAdmin: currentUser && currentUser.username === 'admin',
};
}
这里判断登录名是否是admin
2、config/routes.ts添加路由配置access: ‘canAdmin’
{
path: '/func',
name: 'func',
icon: 'crown',
access: 'canAdmin',
routes: [
{
path: '/func',
redirect: '/func/funcManage',
},
{
path: '/func/funcManage',
name: 'funcManage',
component: './funcManage',
},
],
}
这样功能管理模块就只能admin账号才能看到
3、react hook useAccess获取权限相关信息
import React from 'react';
import { useAccess } from 'umi';
const PageA = (props) => {
const { foo } = props;
const access = useAccess();
if (access.canReadFoo) {
// 如果可以读取 Foo,则...
}
return <>TODO</>;
};
export default PageA;
配合 Access 组件可以很简单的实现页面内的元素的权限控制。
4、Access组件
accessible
Type: boolean
是否有权限,通常通过 useAccess 获取后传入进来。
fallback
Type: React.ReactNode
无权限时的显示,默认无权限不显示任何内容。
children
Type: React.ReactNode
有权限时的显示。
import React from 'react';
import { useAccess, Access } from 'umi';
const PageA = (props) => {
const { foo } = props;
const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo
if (access.canReadFoo) {
// 如果可以读取 Foo,则...
}
return (
<div>
<Access
accessible={access.canReadFoo}
fallback={<div>Can not read foo content.</div>}
>
Foo content.
</Access>
<Access
accessible={access.canUpdateFoo}
fallback={<div>Can not update foo.</div>}
>
Update foo.
</Access>
<Access
accessible={access.canDeleteFoo(foo)}
fallback={<div>Can not delete foo.</div>}
>
Delete foo.
</Access>
</div>
);
};