我是怎么做动态按钮权限的（一）

这是我参与12月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

SAAS 系统动态菜单权限的进一步细化，就是动态按钮权限。

在开发之前，没有想到要做到这么细，所以没有给动态按钮权限留口子，真的要做得那天，也是费了点心思。

那我们来看一下，我是怎么做的动态按钮权限。

我们本次做动态按钮权限，只做到菜单上能点进去的页面，下一页权限不做处理，留给服务端去拦截。

步骤

一、首先，要服务端传来约定的权限树

因为前面已经做过菜单权限，所以按钮权限只需要在菜单权限的基础上，在当前需要按钮权限的页面层级，加一个按钮权限的 array 参数，参数里包含当前页面所有有权限的按钮，例如当前页面有“新增”、“删除”功能，则对应的服务端应该在权限树里添加一段参数：btnLimit:['add'、'del']，代表当前页面需要有“新增”、“删除”功能。

为什么要这么处理呢？

因为一个页面通常按钮类型有限，也不可能出现两种相同类型的按钮，权限不同，所以就直接按照按钮类型进行处理比较简单。

服务端的权限数据结构搞定了，接下来需要我们自己处理按钮权限问题了。

二、使用 VUE 自定义指令实现动态按钮权限

VUE 自定义指令——Vue.directive，直接上代码：

Vue.directive('btnlimit', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: (el, binding) => {
    setTimeout(() => {
      handlebtnLimit(el, binding)
    })
  },
  update: (el, binding) => {
    setTimeout(() => {
      if (el.children) {
        for (let i = 0; i < el.children.length; i++) {
          el.children[i].style.display = ''
        }
      }
      handlebtnLimit(el, binding)
    })
  }
})

大家可以看到，这里使用到 VUE 自定义指令的两个钩子 inserted、 update， inserted 是被绑定元素插入父节点时调用的钩子函数，这里可以做第一次处理，update是所在组件的 VNode 更新时调用的钩子函数，这里是处理刷新时的按钮显隐的问题。

其中 handlebtnLimit 函数是做了按钮权限比对，比对后将样式 display:none;。

此处之前是直接将无权限的按钮进行 remove 处理的，但是翻页的时候，会出现问题，因此改成settimeout + display:none; 处理，settimeout 是为了解决，页面数据没渲染完成，就执行了display:none;的问题。