美文网首页
基于ant-pro脚手架的权限控制

基于ant-pro脚手架的权限控制

作者: cs0710 | 来源:发表于2018-07-31 15:52 被阅读133次

本周末花了两天对权限系统做了简单梳理,大致感悟如下:

权限系统的大致分类
  • 菜单权限
  • 路由权限(ps:页面权限)
  • 功能权限
权限实现

对于权限系统,对于菜单就是每一个菜单对应一个权限的code码,对于路由也一样,路由权限可以看作就是菜单权限,毕竟是菜单控制页面的显示。最后最繁琐的便是功能权限,因为要细化到每个功能点和部分代码逻辑。所以这部分是醉耗时的,但是原理一样都是通过code码去控制。这里和后端约定的格式其实就是一个数组,里面存放的就是当前用户拥有的权限code。为什么要约定数组?这是因为数组的格式对于前端处理起来直接,我们只需要关注care的code是否在数组中就可以了。

具体实现
  • 菜单权限
*   第一步
menu.js.png
对于菜单权限,数据结构物非就是这样,由于我们对每个菜单的code都已经和后端约定好并且已知,所以我们要做的就是手动给每个菜单加code,到这里算是第一步完成!
menu.js.png
*   第二步 
    由于权限是放在用户登录之后完成获取的,所以在进行页面跳转时应该只是在整个应用启动时调用一次,仅仅一次!除非手动刷新。这里在获取时,我们使用的是在加载左侧菜单时调用一次,然后将获取的权限list可以结合具体的menus使用hideInMenu属性进行控制。
BasicLayout.js.png
    利用遍历menus的方法就可以对菜单动态添加hideInMenu属性,达到效果。
menu.js.png
    ⚠️如果热更新页面,左侧菜单不见了,kennel好似SideMenu文件夹中的index.js的this.menus搞的鬼,因为脚手架里是放在了constructor里面初始化的,这里可以改为componentWillReceiveProps再更新一次this.menus的数据。
  • 路由权限
*   对路由添加code码,使用routerData属性数据进行遍历,就可以对url的无权限路由进行拦截到403页面。
图片.png
*   这里要进行拦截,就需要做一些额外的配置。使用dva/router的Redirect组件进行重定向即可。
BaseLayout.js.png
BaseLayout.js.png
    这样对可以对无权限的路由就可以拦截了到403
  • 功能权限
*   功能权限对于组件的控制,只需要在最外层包裹一层组件,里面传入当前组件的code和权限list就可以。

(ps:这里也可以使用npm包,npm i cs_author -S)安装好以后,里面需要传两个参数,当前要控制组件的code码和权限list,使用如下:


npm组件.png 组件.png

外层组件封装好就是这样的。

*   对于js逻辑的控制,就需要针对特定的逻辑去控制,控制的方式一样,都是通过code在权限的list中是否存在控制是否去发请求。
这种方式对于权限控制已经全部覆盖了,所以不说造轮子,但可以画轮子了。

相关文章

  • 基于ant-pro脚手架的权限控制

    本周末花了两天对权限系统做了简单梳理,大致感悟如下: 权限系统的大致分类 菜单权限路由权限(ps:页面权限)功能权...

  • 权限控制

    RBAC模式进行权限控制,即(Role-Based Access Control)基于角色的访问控制。实现权限访问...

  • spring-boot-admin脚手架权限控制拦截器

    使用spring自定义拦截器来权限控制,实现基于restful的动态权限控制 精确到按钮级别的权限控制 1 用户登...

  • Hive权限控制:集成Sentry 和 Hue

    概述 基于Hive 1.2.1、Sentry 1.5.1 Hive没有实现权限控制的功能,但提供了权限控制的接口。...

  • RBAC权限控制

    RBAC权限控制 RBAC: Role Based Access Controller ,即基于角色的访问权限...

  • rbac权限管理

    概述 RBAC : 基于角色的权限访问控制(Role-Based Access Control),通过角色绑定权限...

  • TypeScript + Express + MongoDB 基

    TypeScript + Express + MongoDB 基于角色的权限控制原理与实战(17 个视频) 基于角...

  • Flask 构建微电影视频网站(5)

    基于角色的访问控制 权限管理 添加权限 权限列表 删除权限 编辑权限 修改对应的前端文件 角色管理 添加角色 角色...

  • 从零搭建项目开发框架-02框架设计

    首先界定开发框架都包含哪些内容: 权限控制 日志、异常处理 开发规范 等等 权限控制这里采用基于RBAC(Role...

  • WebGoat<二> Access Conreol Flaws

    在基于角色的访问控制方案中,角色表示一组访问权限和权限。用户可以被分配一个或多个角色。基于角色的访问控制方案通常由...

网友评论

      本文标题:基于ant-pro脚手架的权限控制

      本文链接:https://www.haomeiwen.com/subject/jshhvftx.html