vue 如果精准控制按钮权限

其实按钮权限的控制还是比较容易实现的，现在我以自己项目为例来讲解下具体的实现过程。

首先我对按钮权限的实现理解，登录后返回buttonList，将buttonList缓存到Vuex中，然后再按钮上添加vue自定义指令，如果有这个权限保留，否则呢获取$el,然后removeChild()，看起来觉得不难，直接上代码

// 后端返回的buttonlist

buttonlist = [
    {
        fullAuth: "case:publicWelfare:delete",
        fkDicMenuType: "02", // 02为按钮
        ...
    }
]

fullAuth这个字段就是完整的权限描述，因为我们是动态返回的菜单，case就是菜单名称标识，publicWelfare是子菜单名称标识，delete是按钮权限标识，小伙伴不懂的可以参考我之前的动态路由的文章，是我现在使用的成熟的处理方式。

<el-button v-permission="['case:publicWelfare:edit']" @click="edit(row)">编辑</el-button>

 下面是自定义指令的实现过程

function checkPermission(el, binding) {
    // 添加测试环境 方便测试
    if(!store.state.app.isPro) {
      return;
    }
    const { value } = binding
    const buttons = store.getters && store.getters.buttonList

    if (value && value instanceof Array) {
      if (value.length > 0) {
        const permissBtns = value
  
        const hasPermiss = buttons.some(button => {
          return permissBtns.includes(button.fullAuth)
        })
  
        if (!hasPermiss) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      } else {
        throw new Error(`无按钮权限`)
      }
    }
}

ok！！！