【咕笛说项目 | 前端权限设计从入门到上手】之三：按钮和功能级权限（ACL）

按钮级权限在中型及以下的项目中一般不会涉及，但往往在一些比较复杂的项目中还是需要特别考虑的，这一节我们来一起讨论下按钮级权限在VUE项目中如何去落地。

一般在后台的权限表中，按钮级权限与页面级权限是同在一张表里的，只是用不同的type进行区别。我们一般获取权限的时机是在登录的时候，后台会通过api将当前登录的token信息和权限列表一同返回，我们就是对这个权限列表进行二次加工处理的。

以我司的项目为例，后台是一次性将一个整个的权限列表返回，前端需要将这个列表拆成三个部分：菜单权限、页面权限和按钮权限（菜单权限和页面权限这个在之前的文章中已经交待过，可以参考前几节的内容）。

 

 

实现目标：

1.通过统一权限设置，对页面级的按钮和功能进行可用性控制

2.开发人员可以快速接入和定义ACL

3.操作人员可以快速添加、修改、删除权限

 

权限添加原则：

只对需要控制权限的按钮才设置ACL权限（一旦设置了ACL，就必须要添加到permission表，也必须去设置此权限，关系到所有人），不需要控制的不要加ACL

 

功能设计：

 

1.前端开发人员在页面中，为特定按钮或功能元素，定义v-show标签，计算Vue.$ACL(acl_str)方法的结果，决定其是否显示。

2.用户登录操作后，获取用户的权限列表，分割出FUNC类型的权限，并与系统路由表进行check，得到一个func_permission的对象Array，对象内容如下：

这个list会被缓存起来，在进入每个页面时作为ACL检查的数据来源。

2.Vue.$ACL(acl_str)方法在main.js中全局定义，返回结果逻辑如下：

场景	返回值	说明
acl_str未定义或为空	true（可访问）	在通用组件内部判断某元素权限时会用到
acl_str有定义&&当前用户有权限	true（可访问）	用户权限表中和元素都有ACL
acl_str有定义&&当前用户无权限	false（不可访问）	元素中有ACL 用户权限表中没有ACL

从以上的表格中可以看出，页面的元素添加了ACL，则必须在数据库的permission表中添加该ACL，否则会直接认为是没有该权限，判定为false(不可访问)

 

3.对于非REX页面，可以直接用 v-show="$ACL(acl_str)" 的方式来添加权限控制

 

4.对于REX页面需要在定义各选项时加入ACL属性，来控制权限，在组件内部用v-show="$ACL(acl_str)" 来控制具体写法参考系统中demo页面中的写法。

 

定义方式参考

按钮名称	ACL值	备注
新建	rex.button.add
查看	rex.button.view
删除	rex.button.delete
编辑	rex.button.edit
显示字段	rex.button.column_view
过滤	rex.button.filter
模糊搜索	rex.input.search
导入	rex.button.import
导出	rex.button.export
批量删除	rex.button.batch_delete
批量编辑	rex.button.batch_edit
批量导出	rex.button.batch_export
批量复制	rex.button.batch_copy

原文转自:http://www.gudii.cn/post/6.html