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. 隐藏17年的Office远程代码执行漏洞(CVE-2017-11882)

    Preface 这几天关于Office的一个远程代码执行漏洞很流行,昨天也有朋友发了相关信息,于是想复现一下看看,复现过程也比较简单,主要是简单记录下. 利用脚本Github传送地址 ,后面的参考链接 ...

  2. linux expect自动登陆远程服务器 批量管理服务器

    #!/usr/bin/expect set ipaddress [lindex $argv 0] set passwd [lindex $argv 1] set timeout 3 spawn ssh ...

  3. python 面对post分页爬虫

    分享一则对于网抓中面对post请求访问的页面或者在分页过程中需要post请求才可以访问的内容! 面的post请求的网址是不可以零参访问网址的,所以我们在网抓的过程中需要给请求传表单数据,下面看一下网页 ...

  4. 【译】10个机器学习的JavaScript示例

    原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...

  5. ionic3中 ion-datetime 全屏可点击问题解决方案

    废话不多说,能进来的都应该知道是个什么情况.我也是在网上找了一段时间,才在git上ionic官方团队的Issues中找到了问题解决方法. 第一,给外围包上一层ion-item,但是这有个问题,就是会让 ...

  6. SSM框架的搭建

    第一阶段: 1.用PowerDesign建数据模型,并导出SQL文件: 2.将SQL文件导入到MySQL客户端,建立表格: MySQL数据远程访问:GRANT ALL PRIVILEGES ON *. ...

  7. Nginx的知识分享,感兴趣的可以看一下

    我干了五年了,我想把我的经验跟大家分享一下,欢迎大家阅读. 1. Nginx入门简介 WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务. WWW 是 In ...

  8. 前端测试框架Jest系列教程 -- 简介

    写在前面: 随着互联网日新月异的发展,用户对于页面的美观度,流畅度以及各方面的体验有了更高的要求,我们的网页不再是简单的承载文字,图片等简单的信息传递给用户,我们需要的是更加美观的页面展示,更快的浏览 ...

  9. mysql left join 几个意思

    left join 用于多表  >1个表比如select a.*,b.* from ta as a left join tb as b on a.aid=b.bid咱们就以实际的代码来查看一下. ...

  10. [PHP基础]有关isset empty 函数的面试题

    用isset()和empty()判断下面的变量. $str = ''; $int = 0 ; $arr = array(); isset($str) 返回的是 true 还是 false empty( ...