vue按钮级权限控制

vue按钮级权限控制

学习记录

1.创建 .js文件

import Vue from 'vue'
// 按钮级别权限 -- 比对元素  元素绑定角色值<<-->>登录获取值
// 元素绑定角色值 →_→ 接收 字符串 或 数组
// 登录获取值 →_→  接收 字符串
// 执行指令  元素插入时 获取 元素指令角色 与原型对比 执行下方 Vue.prototype.$_has
/** 权限指令**/
let has = Vue.directive('has', {
  inserted: function (el, binding) { // 注意使用inserted周期，不要使用 bind 不然无法删除元素
    let className = binding.value.class // v-has 接收数组对象
    if (el.parentNode && !Vue.prototype.$_has(className)) { // 检查
      el.parentNode.removeChild(el)
    }
  }
})
//  元素指令值与角色值对比 如果不匹配  返回false
// 权限检查
Vue.prototype.$_has = function (val) {
  let isShow = false
  let btnPermissions = sessionStorage.getItem('btnPermissions')
  if (btnPermissions === undefined || btnPermissions == null) {
    return false
  }
  if (typeof (val) === 'string') {
    if (val === btnPermissions) {
      isShow = true
    }
    return isShow
  } else {
    for (let i = 0; i < val.length; i++) {
      const showIs = val[i]
      if (showIs === btnPermissions) {
        isShow = true
      }
    }
    return isShow
  }
}
export { has }

暴露方法 export { has } 时，注意要与顶部指令变量对应

2. 在main.js中引入当前文件

注意加 { } 接收

// 按钮级别权限
// eslint-disable-next-line no-unused-vars
import { has } from './router/btnPermissions'

3. 视图层

vue指令使用对象接收

<el-button type="primary" v-has="{class:'supper'}">1</el-button>
<el-button type="primary" v-has="{class:['supper','user']}">2</el-button>

至此 理论上就结束了→_→!