React Admin Template

开箱即用的中台前端/设计解决方案。

✨ 特性

🛡 TypeScript: 应用程序级 JavaScript 的语言
💎 优雅美观：基于 Ant Design 体系精心设计
🚀 最新技术栈：使用 React/umi/antd 等前端前沿技术开发
🌐 国际化：内建业界通用的国际化方案
🔢 Mock 数据：实用的本地数据调试方案
⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
🔐 优秀的权限设计：目前能找到的最好的权限实现方案

🎉 推荐

微前端版本 micro-frontends-template 正在同步开发中...
好用的水印组件 watermark

📜 目录

├── 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 [email protected]: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

关于权限管理

权限设计

参考阿里云权限设计

前后端遵循一套权限语法module:action

1、module 表示项目模块
2、action 表示具体权限
* 表示该模块下所有权限皆可以访问

权限实现通过权限 + 策略 + 用户组（用户）实现

1、权限

表示具体权限

例如user/create 表示用户创建权限，user/* 表示拥有用户模块所有权限

2、策略

权限集合，可组成特定的操作权限，可设置为允许或者禁止

策略数据结构如下:

{
  // 策略版本
  version: number,
  statement: [
     {
       // 权限效力
       // allow: 允许； deny: '禁止'
       effect: 'allow' | 'deny',
       // 权限集合
       action: string[]
     },
     ...
  ]
}

3、用户组

拥有相同策略的用户集合

4、用户

系统用户

pansyjs / react-admin Goto Github PK

react-admin's Introduction

React Admin Template

✨ 特性

🎉 推荐

📜 目录

🔐 关于权限

⌨️ 本地开发

🖥 支持环境

👥 社区互助

react-admin's People

Contributors

Stargazers

Watchers

Forkers

react-admin's Issues

全局组件

布局相关

权限相关

Rate-Limited

Open

Detected dependencies

权限设计

v2.0.0

v2.1.0

Recommend Projects

Recommend Topics

Recommend Org

Jobs