vue 判断用户是否有该功能权限（例如编辑删除）

Question

如题，想要根据接口返回的权限数组判断当前用户是否拥有该功能的权限 如果没有就隐藏table中该功能，想知道怎么实现
朋友提出一个办法：
可以将权限清单放到顶层组件中（provide），页面使用 （inject），或者做个全局minxes ，页面直接 v-if="[...].includes('key')"

Answer 1

我的做法是通过指令实现，我个人觉得控制显隐不太友好，可能会让人觉得是没有该功能，而不是自己的权限不足所导致，我的处理是置灰并文字提示
<el-button v-perm="$hasPerm('info:add')">新建</el-button>
$hasPerm是挂载到全局的判断方法，判断当前权限是否在权限数组中，返回一个布尔值
v-perm是自定义的指令
实现效果如图

v-perm指令代码如下，代码只做了el-button的处理

export default {
  inserted(el, binding) {
    if (!binding.value) {
      const cover = document.createElement('div')
      el.parentNode.replaceChild(cover, el)
      cover.appendChild(el)
      // el-button的处理
      if (hasClass(el, 'el-button')) {
        addClass(el, 'is-disabled')
        // 使用innerHTML，会移除所有事件，即无权限时所有事件交互无效
        const res = Vue.compile(`<el-tooltip class="item" effect="dark" content="权限不足，请联系管理员" placement="top-start">
           ${cover.innerHTML}
        </el-tooltip>`)
        const Tooltip = Vue.extend({
          render: res.render
        })
        const tooltipIns = new Tooltip().$mount()

        empty(cover)
        cover.parentNode.replaceChild(tooltipIns.$el, cover)
      }
    }
  }
}