VUE自定义指令实现按钮权限控制

1、需求背景

对于后台业务系统，经常有按钮根据角色权限控制显隐的需求。现在系统中按钮的权限已经和菜单id绑定了，当跳转到新页面时，会根据当前的菜单id，获取当前页面的按钮权限列表，数据格式如下。代表当前页面可以访问标志为sys-add、sys-update、sys-delete的按钮，即新增、修改、删除。

[
  "sys-add",
  "sys-update",
  "sys-delete"
]

2、自定义指令

2.1 设计思路

在按钮上绑定自定义指令，将访问标记传入，然后在指令的编写中，将当前页面按钮的访问权限数组和按钮的访问标记作比对，访问权限数组中存在该标记，即可访问。

2.2 实现

1）编写指令

编写指令的beforeMount钩子函数，新建文件hasLimit.ts。

export const btnLimitDirective = {
  beforeMount(el, binding) {
    const limitStore = limitStore()
    // btnLimits为可访问的按钮权限数组
    const btnLimits = limitStore.btnLimits
    
    // 解构出value
    const { value } = binding
    if (value && value instanceof Array && value.length > 0) {
      if (btnLimits) {
        // 访问权限数组中是否存在该标记
        const hasRight = value.some((item) => btnLimits.has(item))
        if (!hasRight) {
          // 不存在，则设置为不显示
          el.style.display = 'none'
        }
      }
    }
  }
}

2）注册指令

在main.ts中注册指令

import { btnLimitDirective } from '@/direct/hasLimit'
app.directive('btn-limit', btnLimitDirective)

3）使用指令

在组件中的按钮上，使用指令“v-btn-limit”，将按钮的标志作为值传入。在指令的钩子函数中，接收到这个值 ，会做判断，没有该权限时，会设置display:none。

<a-button v-btn-limit="['sys-delete']" @click="onDelete">删除 </a-button>