vue 管理页面按钮权限

场景

在beforeRouteEnter中获取权限，并使用自定义指令设置权限

示例代码

// 获取权限
beforeRouteEnter (to, from, next) {
  // 获取当前用户
  let sysUserId = getSession(USER_ID)
  if (sysUserId) {
    // 获取按钮权限并设置
    let {data} = await user.getAllButtons(sysUserId, to.meta.id)
    next(vm => {
      vm.$permittedButtons = data.map(x => x.widgetId.split('-')[1])
    })
  } else {
    next(vm => {
      vm.$permittedButtons = []
    })
  }
}

// 自定义指令进行页面按钮权限控制
Vue.directive('pms', function (el, binding, vnode) {
  // 处理beforeRouteEnter中设置的权限（$permittedButtons）在首次渲染中获取不到的情况
  setTimeout(() => {
    let {value: btnKey} = binding
    let {componentInstance, context} = vnode
    let btnPermissions = context.$permittedButtons
    let instance = context
    while (instance && btnPermissions == null) {
      instance = instance.$parent
      if (instance) btnPermissions = instance.$permittedButtons
    }
    if (btnPermissions == null || !btnPermissions.includes(btnKey)) {
      Vue.config.silent = true
      componentInstance.disabled = true
      Vue.config.silent = false
    }
  })
})

注意事项

beforeRouteEnter中设置的权限数据是在 自定义指令生效之后，所以需要用setTimeout延迟获取权限数据