bird前端项目,基于react、antd、antd-admin,封装常用数据组件,细粒度权限解决方案。

bird-front是基于react的后台管理系统前端项目,框架构建部分严重借鉴于antd管理系统解决方案antd-admin,其项目地址:https://github.com/zuiidea/antd-admin

bird-front地址:https://github.com/liuxx001/bird-front

权限方案:

bird-front对权限部分进行了重新设计,支持更细粒度的权限控制(按钮级)。前端的权限应该控制什么?资源的可见性。其包括:

  • 路由的可见性。
  • 页面中按钮的可见性。

在登录时获取用户拥有的权限集合,在前端存储。

  • 路由可见性控制:路由变化时,进行权限判断,通过则渲染对应组件,否则渲染403组件。
  • 按钮的可见性控制:封装bird-button组件,传入按钮所需权限名,内部进行权限判断,通过则渲染按钮。

前端的权限控制只能处理页面渲染,不能保证系统的绝对安全,服务端也需要对接口的权限进行验证。

组件:

bird-front对常用的数据组件进行了封装,使其简单易用,包括:

所有业务组件的理念均是结合服务端接口进行组件的封装,兼顾灵活性的同时保证更优的业务开发速度。

项目获取:

git clone https://github.com/liuxx001/bird-front

安装依赖包:

npm install

启动项目:

npm run start

登录名:admin 登录密码:admin

效果图: 

【bird-front】前端框架介绍的更多相关文章

  1. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  2. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  3. SpringMVC 框架介绍以及环境搭建

    目录 前端设计模式介绍 分析前端设计模式 Spring MVC简单介绍 Spring和Spring MVC的关系 配置Spring MVC的环境并简单测试 前端设计模式介绍 前端设计模式其实和前端没啥 ...

  4. 10大H5前端框架

    作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...

  5. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

  6. 如何选择前端框架:ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...

  7. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  8. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

  9. Semantic-UI和其他几个前端框架

    本来是想介绍Semantic-UI的,但如果只介绍这个框架,没什么内容,框架相关feature站点上有不需要说,所以干脆列出自己常用的几个前端框架,算是做个阶段性总结. 本文的核心是侧重于HTML/C ...

随机推荐

  1. 后端自动化版本管理,再也不用改URL了!

    每次升级接口版本时,后端.前端.客户端都是痛苦的: 后端:要兼容旧版客户端,以前的接口不能动啊,又得写新接口.新文档了,唉! 前端:还好,就是版本号到处都是,改起来比较烦. Android:快点啊产品 ...

  2. react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么?

    react-router 3 文档: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md react-router 4 ...

  3. android 开源收藏

    第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...

  4. JIT——即时编译的原理

     介绍 java 作为静态语言十分特殊,他需要编译,但并不是在执行之前就编译为本地机器码. 所以,在谈到 java的编译机制的时候,其实应该按时期,分为两个部分.一个是 javac指令 将java源码 ...

  5. 查看Page结构

    SQL Server存储数据的基本单元是Page,每一个Page的大小是8KB,数据文件是由Page构成的.在同一个数据库上,每一个Page都有一个唯一的资源标识,标识符由三部分组成:db_id,fi ...

  6. 《Maven实战》 第7章 生命周期与插件

    7.1什么是生命周期 软件开发人员每天都在对项目进行清理.编译.测试及部署,Maven生命周期是对所有构建过程进行抽象和统一,含项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等几 ...

  7. 在ThinkPHP中使用常量解决路由常规地址不安全传送数据问题

    在ThinkPHP搭建项目的同时,会考虑到后期对静态页面的维护问题, 在项目的不断完善的同时,会有大量图片,css文件,以及js文件等一些容易修改.添加.或者删除的资源 如果在中后期对各个静态页面,j ...

  8. 可靠的、可扩展的、可维护的数据系统 ------《Designing Data-Intensive Applications》读书笔记1

    坦白说也是机缘巧合,在硕士生阶段进入分布式系统领域学习.无论是大规模存储或计算,其核心也是运用分布式技术利用并行性来解决数据密集型应用的需求.最近开始在啃这本<Designing Data-In ...

  9. absolute和relative元素 设置百分比宽高的差异

    一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...

  10. Oracle 每天自动生成AWR报告

    经验丰富的老员工希望能够每天为数据库生成1个AWR报告,以便于后期分析数据库的性能变化,手动生成太麻烦,查了一下资料,发现可以自动生成,过程如下. 数据库环境:11gR2 RAC(双节点) AWR报告 ...