├── config # umi 相关配置
├── docker # docker 相关配置
├── mock # 本地模拟数据
├── public # 静态资源
├── src # 源代码
│ ├── assets # 本地静态资源
│ ├── common # 类型定义、常量
│ ├── components # 全局公用组件
│ ├── config # 全局配置
│ ├── layouts # 布局文件
│ ├── locales # 国际化资源
│ ├── models # 路由
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 所有请求
│ ├── utils # 全局公用方法
│ ├── app.tsx # 运行时配置文件
│ ├── authority.ts # 权限定义文件
│ ├── global.less # 全局样式
│ └── typings.d.ts # 补充类型定义
├── package.json # package.json
└── tsconfig.json # tsconfig.json
基于 umi-plugin-authority 提供权限功能,暴露 useAuthority
hooks 和 Authority
组件实现权限控制的能力
使用示例如下
import React from 'react';
import { useAuthority, Authority } from 'umi';
const PageA = props => {
const { foo } = props;
const { combinationVerify } = useAuthority();
// 使用 hooks 提供的能力
if (combinationVerify('module1/action1')) {
// 存在 module1/action1 权限,则...
}
return (
<div>
{/** 指定需要验证的权限 */}
<Authority
access="module1/action1"
fallback={<div>Can not read foo content.</div>}
>
Foo content.
</Authority>
{/** 直接指定权限 */}
<Authority
accessible={combinationVerify('module1/action1')}
fallback={<div>Can not update foo.</div>}
>
Update foo.
</Access>
{/** 复杂的校验 */}
<Authority
accessible={combinationVerify('(module1/action1 || module1/action2) && module1/action3')}
fallback={<div>Can not update foo.</div>}
>
Update foo.
</Access>
{/** children 为function */}
<Authority
accessible={combinationVerify('module3/action1')}
fallback={<div>Can not delete foo.</div>}
>
{(isMatch) => <span>权限校验结果: {isMatch}</span>}
</Authority>
</div>
);
};
# 克隆项目到本地
git clone git@github.com:ts-react/react-admin-template.git
# 切换到项目目录
cd ./react-admin-template
# 安装依赖
yarn
# 启动服务
npm run start
现代浏览器及 IE11。
IE / Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Github Issue | 钉钉群 | 微信群 |
---|---|---|
issues |