KKing权限模型

6 篇文章 0 订阅
3 篇文章 0 订阅


KKing是一个Springboot+Ant-Design-Pro-Vue实现的前后端分离Admin权限管理系统, 预览地址,源码在 Github,欢迎star

一、功能权限

       功能权限使用经典的RBAC模型,shiro做为实现框架。
       经典模型可以参见:权限系统与RBAC模型概述[绝对经典],这里引用这篇文章中的几个图,描述下表结构的设计:

RBAC0模型

RBAC0模型

参考文献中的一种设计

       表结构的设计就是参考上图,但去掉了操作表,直接冗余到权限表中,因为用到的操作类型有限,仅“有和无”两种,如果类似文件“读、写、执行”等多种操作,就需要操作表了。
       每种资源(如菜单、部门)赋与权限,权限分配给角色,角色可分配给用户或用户组,都是一对多的关系。

二、数据权限

       功能权限仅仅解决了“有和无”的问题,如用户“是否”能看到一个菜单,“是否”能操作一个按钮,“是否”能查看一个部门的数据,但如果数据是部分有权限的,是处理不了的,如虽然用户A与B都可以看到“用户管理”菜单,但分别只能查看自己有权限查看的部门数据,甚至同一条用户数据,A可以查看所有,但B不能查看密码等敏感数据。

三、后台实现

       最终代码中使用了参考工程若依中的方式,使用自定义Annotation的方式,对需要数据权限操作的函数,手写sql添加到查询条件中,限制用户只能访问自已所拥有角色对应有权限的数据。
       其实这样就相当于将权限筛选交给了数据库,逻辑清晰简单,就是sql都变得有点复杂。
       上代码,自定义一个Annotation,有两个参数

  • 类型:现在代码中有两种,一种是部门,一种是菜单,分别有自己的过滤实现
  • 表别名:sql中需要过滤的表的别名,因为仅用字段名有可能会有歧义
public @interface DataScope {
    public String type() default "dept";
    public String tableAlias() default "";
}

@Override
@DataScope(type = "menu")
public List<JSONObject> getUserMenu(TSysMenu tSysMenu) {
    List<TSysMenu> menuList = tSysMenuMapper.getUserMenu(tSysMenu);
    return TreeUtil.toTreeList(menuList);
}

写一个切面,针对这个注解,针对不同类型,做数据权限过滤,逻辑是根据用户所拥有的权限进行过滤,拿菜单做一个例子

@Pointcut("@annotation(com.kking.common.annotation.DataScope)")
public void dataScopePointCut(){}

private void handleMenuDataScope(JoinPoint jp){
    TSysUser user = (TSysUser)SecurityUtils.getSubject().getPrincipal();
    BaseEntity entity = (BaseEntity)jp.getArgs()[0];

    String sql = String.format(
                "and m.id in (" +
                    "select p.resource_id " +
                    "from t_sys_user_role ur,t_sys_role_perm rp,t_sys_perm p " +
                    "where ur.role_id=rp.role_id and rp.perm_id=p.id " +
                    "and ur.user_id=%d and p.perm_type='MENU')",user.getId());

    //给entity添加额外sql
    entity.getParams().put("dataScope",sql);
}

最后,在mybatis的xml文件中,将这个额外的数据权限sql添加到需要做数据权限过滤的sql中,如:

<delete id="deleteById" parameterType="TSysMenu">
    update t_sys_menu m set state=1 where id=#{id}
    ${params.dataScope}
</delete>

这样,最后需要有数据权限过滤的sql,都变成了这个样子:

update t_sys_dept set state=1 where id=? 
and id in (
    select id from (
        select distinct d.id 
        from t_sys_user_role ur,t_sys_role_perm rp,t_sys_perm p,t_sys_dept d 
        where ur.user_id=1 and rp.role_id=ur.role_id and p.id=rp.perm_id and FIND_IN_SET(p.resource_id,concat(d.id,',',d.pids)) and p.perm_type='DEPT'
    ) a
) 

四、前后分离

       前后分离,所有数据通过ajax来走接口,权限控制也类似,后端传递权限数据给前端,前端来判断菜单、按钮等是否展示,当然后端接口也要加上权限控制。
       实现KKing时,直接偷了个懒,直接菜单都走配置化,所有菜单数据配置好后,由后端过滤权限后,传递可展示菜单及权限列表给前端,前端菜单通过动态路由添加上去,界面通过权限来控制是否展示,后端过滤权限比较简单,不详细展开,稍微说一下前端的实现。(前端直接使用的是ant-design-pro-vue,内部其实实现了权限处理,不过如上面所说,做了一些改动)

  1. 后端返回的数据由原来的只有权限数据,变成添加菜单数据;
  2. 原来前端是根据权限数据来进行过滤菜单展示,现在变成根据菜单直接添加路由
// permission.js
// 新增服务器返回的菜单路由
const makeRoutesSafe = (routes, deep) => {
  for (var index in routes) {
    var route = routes[index]
    var meta = { title: route.name, icon: route.icon }
    route.meta = meta
    if (!route.path) {
      route.path = ''
    }
    if (route.children) {
      route.component = PageView
    } else {
      const componentPath = route.component
      // 动态加载组件
      route.component = () => import(`@/views/${componentPath}`)
    }
    if (route.children) {
      makeRoutesSafe(route.children, ++deep)
    }
  }
  return routes
}
export const addRoutes = (newRoutes) => {
  makeRoutesSafe(newRoutes, 0)
  store.commit('SET_ROUTERS', newRoutes)
  router.addRoutes(store.getters.addRouters)
}
...
addRoutes(res.menus)
  1. 修改v-action为v-perm指令,直接根据权限标识判断组件显示;
  2. 添加Vue.prototype.$hasPerm,用于jsx中判断权限
// permission.js
/**
 * Perm 权限指令
 * 指令用法:
 *  - 在需要控制 perm 级别权限的组件上使用 v-perm:[method] , 如下:
 *    <a-button v-perm:user:add >添加用户</a-button>
 *    <a-button v-perm:user:delete>删除用户</a-button>
 *    <a v-perm:user:edit @click="edit(record)">修改</a>
 *  - jsx中请使用如下方式
 *    {this.$hasPerm('user:add')?<a-button>添加用户</a-button>:''}
 *
 *  - 当前用户没有权限时,组件上使用了该指令则会被隐藏
 */
function hasPerm (permName) {
  const roles = store.getters.roles
  var permList = []
  roles.map(role => {
    permList.push(...role.permissionList)
  })
  return permList.indexOf(permName) >= 0
}

Vue.prototype.$hasPerm = hasPerm

const perm = Vue.directive('perm', {
  bind: function (el, binding, vnode) {
    const permName = binding.arg

    if (!hasPerm(permName)) {
      setTimeout(() => {
        if (el.parentNode == null) {
          el.style.display = 'none'
        } else {
          el.parentNode.removeChild(el)
        }
      }, 10)
    }
  }
})

export {
  perm
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值