最近看了AntDesignPro关于权限控制的官方文档以及自己框架里权限控制的实现,总结一下. 先贴一下官网上关于权限控制的图有利于理解 步骤如下: 判断是否有 AccessToken 如果没有则跳转到登录页面 获取用户信息和拥有权限store.dispatch('GetInfo') 用户信息获取成功后, 调用 store.dispatch('GenerateRoutes', userInfo) 根据获取到的用户信息构建出一个已经过滤好权限的路由结构(src/store/modules/perm

ant design pro V2菜单栏显示流程, 用户输入用户名,密码,登录调用登录接口,校验后返回该用户的权限字段currentAuthority,然后通过调用setAuthority(currentAuthority)函数来设置该用户的菜单栏权限,(setAuthority函数位于src/utils/authorty.js中),setAuthority函数将权限字段放在缓存中,登录后与菜单栏路由文件中的authorty字段比对.源程序针对登录返回的currentAuthority字段为单个

Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAuthority(str) { // return localStorage.getItem('antd-pro-authority') || ['admin', 'user']; const authorityString = typeof str === 'undefined' ? localSto

最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速上手写逻辑. 前端框架选用了 Ant Design Pro V5,前端已经很多很多年没有写过了,边学习边实践吧. Password 模式 建议采用 authorization_code 的方式.github 有一些开源的 oidc 库, 方便前端使用.Oidc 方式有时间会写一下. Abp 可以通过

一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs.com/freely/p/10874297.html   Ant Design Pro 是一套开箱即用的中台前端/设计解决方案,是一个开发 中后台 系统的 脚手架.类似 vue-cli 一样,创建项目后,各种webpack配置.路由配置等,都已经弄好,直接开发就可以了. 2.Ant Design

[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/index-cn 该套模板是使用了React开发框架作为基础,AntDesign(蚂蚁金服开源UI组件库)作为UI库,集成了Dva,Umi,Mock等库,如果不是很了解这些内容,门槛还是比较高的,下面我们梳理一下从零开始运行起来这个项目的过程. [准备环境] node js 安装最新版即可 我的node

一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何页面,可以由路由引导到预设的 404 页面. 代码控制跳转到报错页面,比如根据请求返回的数据,将没有权限的用户引导到 403 页面. 2.1.2.实现 针对页面级的报错,我们提供了两个业务组件供你选择,可以很方便地实现一个报错页面: Exception 异常页 <Exception type="

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 开箱即用的中台前端/设计解决方案,没有用过的小伙伴先撸一遍文档.基于React,需要一定的基础. 2. Ant Design 配套组件,另外Antd还设计了超级组件 ProComponents,看着有点麻烦,不过我猜用起来应该很爽. 3. v5是预览版默认ts,目前不可选js版本.前端ts是一个趋势

ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以下简称Adp)打包成桌面安装使用,因为我的项目是一个企业业务计算系统,并不会常有需求的更新,因此打包成桌面应用,用户体验更好. 首先,Adp项目和Electron打包分开,就是不要把两者的依赖和配置文件放在一个项目里,这是保持项目的纯粹性,各自专注自己的事情.因此,我们就需要一个Adp项目,一个Elect

本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意,同时也能通过小Demo提升学习信心. 一.Ant Design Pro简介 Ant Design Pro是一个开箱即用的中台前端/设计解决方案. Ant Design Pro官网地址:https://pro.ant.design/index-cn GitHub源码下载地址为:

一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难点给阻塞住,从而保证项目进度. 在 Ant Design Pro 中我们已经有了一套比较完善的 mock 功能,而 roadhog-api-doc 工具,则能够从项目的 mock 数据中读取接口信息生成对应的文档,这样就能够更加清晰明了的展现项目的接口情况. 效果如下:Pro API Docs. 二

一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提供了如下功能: pro new 新建一个脚手架,会自动将最新的 Ant Design Pro 脚手架下载到本地并安装 pro generate 新建一个模板,包含 model.service.page.component 二.使用过程 2.1.如何使用 使用 npm 安装到本地 npm instal

一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞. 在 Ant Design Pro 中,因为我们底层的工具是 roadhog,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能. 二.详细 2.1.使用 roadhog 的请求代理功能 在通过配置 .roa

一.概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上的二次封装,同时提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展示效果. 目前一共包涵 10 个图表类型,以及 2 个图表套件: 饼状图(Pie) 柱状图(Bar) 仪表盘(Gauge) 雷达图(Radar) 标签云(TagCloud) 水波图(WaterWave) 迷你柱状图(

一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run build 由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js.***.css.index.

一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作.下面将简单介绍和服务端交互的基本写法. 二.详细介绍 2.1.前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的

一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性. 2.2.css modules 在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面

一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框架结构,往往会包含导航.页脚.侧边栏.通知栏以及内容等.在页面之中,也有很多区块的布局结构.Ant Design 目前提供了两套布局方案:Layout 和 Grid . 二.布局 2.1.根据不同场景区分抽离布局组件 在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通

一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含components目录等等.每次在新建项目时,手动创建这些固定的文件目录.脚手架的作用就是帮助你完成这些重复性的工作,包括一键生成主要的目录结构.安装依赖等等. 1.2.参考地址 ant design参看地址:https://ant.design/docs/react/intr

发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount() { this.fetchListCallback(); } fetchListCallback = () => { const { limit, offset } = this.state; const { dispatch } = this.props; dispatch({ type: 'b