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. Android隐藏软键盘

    1,用java代码隐藏: /**隐藏软键盘**/        View view = getWindow().peekDecorView();        if (view != null) { ...

  2. 件测试博客日记Day03-11.17日 —— 赵天宇 —— 禅道的使用和配置详细版

    说在维基百科先查找关于禅道相关知识,发现有关于禅道这个项目管理软件的详细介绍,然后将相关的介绍进行整理写入文档,在禅道的介绍中也有下载地址并进行安装. (1)软件的基本情况 a.中文名称:禅道项目管理 ...

  3. webpack中tree-shaking技术介绍

    之前介绍过webpack3的新特性,里面提到webpack2支持了ES6的import和export,不需要将ES6的模块先转成CommonJS模块,然后再进行打包处理.正基于此,webpack2引入 ...

  4. 浅析php命名空间

    介绍 印象中只有java代码才会用到一大堆的import,当初看到后一脸懵逼并对php心生自豪:还是我大php牛逼够简洁,殊不知php也有命名空间这一说,这些年用的越来越多.那么,为什么要搞那么麻烦呢 ...

  5. ABAP中的AMDP(ABAP-Managed Database Procedures )

    ABAP管理下的数据库存储过程(ABAP-Managed Database Procedure,以下简称AMDP)是在APAP on SAP HANA开发中的一种优化模式.AMDP使用数据库语言书写, ...

  6. 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin

    首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...

  7. 百度OCR文字识别-身份证识别

    简介 一.介绍 身份证识别 API 接口文档地址:http://ai.baidu.com/docs#/OCR-API/top 接口描述 用户向服务请求识别身份证,身份证识别包括正面和背面. 请求说明 ...

  8. HDU 1754 线段树 单点跟新 HDU 1166 敌兵布阵 线段树 区间求和

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. ibv_open_device()函数

    struct ibv_context *ibv_open_device(struct ibv_device *device); 描述 函数会创建一个RDMA设备相关的context:可以通过ibv_c ...

  10. VantPy自动化测试框架

    1.必须要谈的一点,就是我们学习自动测试不是用来炫耀的,而是用来提升自身能力的. 2.这个框架不是通用框架,只是在这里灌输这个框架的思想,让每个人写框架都易如反掌 3.如果没有python基础的同学, ...