vue自定义指令-按钮鉴权

提供鉴权思路 真实开发中根据情况选择

// permission.js
/*
  key 身份信息
*/
function checkPermission (key) {
  let permissionList = [1, 2, 3, 4, 5];// 有权限的身份信息 开发中接口请求获得
  return permissionList.indexOf(key) > -1;
}

Vue.directive('permission', {
  inserted (el, binding) {
    let key = binding.value; //获取v-permission = '3'

    if (key) {
      let hasPermission = checkPermission(key);
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el); //没有权限移除元素
      }
    } else {
      throw new Error('需要定义key')
    }
  }
})

main.js中引入permission.js 即可全局使用指令鉴权
<button v-permission='3'>我有权限</button>
<button v-permission='6'>我有权限</button>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容