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. 其他信息: ORA-01400: 无法将 NULL 插入

    这个错误其实就是oracle数据库的某列约束为 not null,但在插入值的时候插入了控制,无论是null和"",它都识别为空 有两种方法: 1.修改数据库字段约束为允许为空 2 ...

  2. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

  3. Hangfire在ASP.NET CORE中的简单实现

    hangfire是执行后台任务的利器,具体请看官网介绍:https://www.hangfire.io/ 新建一个asp.net core mvc 项目 引入nuget包 Hangfire.AspNe ...

  4. 基于ESXI6.5的服务器基本配置(HP DL388 Gen 9)

    最近一段时间由于做毕业设计的原因,一直处于忙碌状态,刚做完毕业设计,导师处于项目的原因,买了一台惠普服务器(人民币1.7万),服务器自带的内存仅有16 G,硬盘也就只有600G,而且磁盘还做了raid ...

  5. Mysql基础--表的操作

    1.表的基本概念 每一行代表一条唯一的记录,每一列代表记录中的一个字段. 2.创建表 例子: 3.查看表结构 (1)DESCRIBE语句查看表定义 语法: 例子: (2)SHOW CREATE TAB ...

  6. CNN网络介绍与实践:王者荣耀英雄图片识别

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:高成才,腾讯Android开发工程师,2016.4月校招加入腾讯,主要负责企鹅电竞推流SDK.企鹅电竞APP的功能开发和技术优化工作 ...

  7. 用python 抓取B站视频评论,制作词云

    python 作为爬虫利器,与其有很多强大的第三方库是分不开的,今天说的爬取B站的视频评论,其实重点在分析得到的评论化作嵌套的字典,在其中取出想要的内容.层层嵌套,眼花缭乱,分析时应细致!步骤分为以下 ...

  8. mysqldump指定编码导出数据

    mysqldump指定编码导出数据 第一步,导出旧库 mysqldump --default-character-set=latin1 -uroot -pXXX --database db >  ...

  9. 两个实用linux小工具

    使用 sshpass 工具来做名密码输入 使用 alias 别名来做成命令语句. Linux命令之非交互SSH密码验证-sshpass ssh登陆不能在命令行中指定密码.sshpass的出现,解决了这 ...

  10. RobotFramework自动化测试框架-移动手机自动化测试Element Attribute Should Match关键字的使用

    Element Attribute Should Match 关键字用来判断元素的属性值是否和预期值匹配,该关键字接收四个参数[ locator | attr_name | match_pattern ...