每天一个前端小知识15——Vue权限控制

总结

通过自定义指令

代码

// permission.js 校验权限方法
export function checkPermission(key) {
    
    
  // 权限数组
  let arr = ['1', '3', '5']
  if (arr.indexOf(key) > -1) {
    
    
    return true
  } else {
    
    
    return false
  }
}

// 自定义指令
Vue.directive('display-key', {
    
    
  inserted(el, binding) {
    
    
    let displayKey = binding.value
    if (displayKey) {
    
    
      let hasKey = checkPermission(displayKey)
      if (!hasKey) {
    
    
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
    
    
      throw new Error('需要一个key值')
    }
  }
})

// vue文件
<buttton v-display-key="'1'">提交</buttton>