前言

最近很多项目都做了权限功能，并且都细分到了按钮级别，本节就来介绍一下如何实现按钮级别的权限。

按钮权限

说起权限，首先想到的是菜单权限，项目中是通过权限码控制菜单，每个菜单对应一个权限码，在addRoute时，获取当前用户的权限码，根据权限码去添加对应的菜单，而按钮权限也可以沿用此思路。

自定义指令

将按钮功能当作一个权限码，比如导出功能，对应一个导出权限码，导出按钮就用此权限码判断，页面上的效果我们可以通过v-if去实现，总结下来按钮权限就是两步：

将按钮功能总结出来，形成一个权限码，获取当前用户的权限，与按钮权限码进行对比。
按钮添加v-if，对应的value值就是权限对比结果。
第一步需要跟后端合作，权限码对比的方法项目中用到的页面会多一点，所以我们就可以写到vuex里面，在需要用到的页面引入进来。这是最简单的思路，在此基础上我们可以把权限对比、v-if结合起来，自定义一个指令，该指令的参数、效果如下：
参数：接收权限码参数。
效果：当前用户拥有此权限码就展示，否则隐藏。
公司项目用的vue2，所以这里用vue2技术栈实现。vue2自定义指令方法为directives，自定义指令包含好几个钩子函数，这里我们选用inserted ，相当于生命周期中的mounted。钩子函数有四个参数，重点是以下两个参数：
- el：绑定的元素。
- binding：指令信息对象，包括name------指令名；value------绑定值；modifiers------修饰符对象。
  我们就用directives写出一个v-permission指令，首先就是进行权限的判断，我们给指令绑定一个权限码数组，通过binding获取绑定值，然后通过接口获取角色拥有的权限，最后利用数组的some方法去判断该用户是否有按钮权限。

js 复制代码

export const permission = {
inserted(el, binding) {
const { value } = binding
// 获取角色权限码
const roles = UserInfo.roles
// 绑定值权限码数组
if (value && value instanceof Array && value.length > 0) {
const permissions = value
const hasPermission = roles.some(role => {
return permissions.includes(role)
})
}
}

当用户没有此按钮权限，我们利用el参数，调用父元素的removeChild方法，移除此dom，达到隐藏效果，这个刚好与v-if也对应上。

js 复制代码

if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}

利用Vue.directive绑定此函数，就能得到v-permission，在权限按钮使用此指令。

js 复制代码

<el-button v-permission=['1','2']></el-button>

如果我们不想要隐藏效果而是禁用效果，将移除元素的逻辑修改一下即可。注意，项目中运用了element ui所以禁用效果我们只需在元素的class列表中添加is-disabled类名。当然两者功能可以结合起来，我们在v-permission指令上添加一个disabled修饰符，通过binding中的modifiers修饰对象去判断。

总结

以上就是按钮权限功能的实现，通过自定义指令方便快捷的实现此功能，并且可以根据需要添加其他功能。当然如果是列表操作列当中的按钮，可以交由后端处理，让其返回一个权限字段。

需求小能手——按钮权限功能

前言

按钮权限

自定义指令

总结