权限控制（vue）

经常会遇到，角色权限控制问题，若是页面控制，倒好说，可如果是当前页面部分可见不可见，这就有些麻烦，如果加上条件就更加苛刻。之前只是简单的v-if进行控制，如今想试试指令（网上一直有这些操作方式）

参考

参考了vue-element-admin -- 指令

应用场景

权限控制
- dom隐藏（不推荐）
- 直接从dom节点删除
依据传入的数据动态进行修改

代码

需求：需要实现一个依据动态参数进行修改的模块

test.vue

template

<div class="test-height">
  <!-- 指令调用，status是动态参数 -->
  <h1 v-permission="{ role: ['so'], status }">test</h1>
</div>

js

  import permission from '@/directives/permission'
  export default {
    ...
    directives: { permission },
    data () {
      return {
        status: false
      }
    },
    mounted () {
      // 动态修改参数
      setTimeout(() => {
        this.status = !this.status
      }, 1000)
    }
  }

permission.js

  import store from '@/store'
  const permission = (el, binding, vnode, oldVnode) => {
    const { value, oldValue } = binding
    if (!value || (value.role && !Array.isArray(value.role))) {
      throw new Error(`need roles! Like v-permission="{ role: ['admin','editor'], [status 可传 boolean]}"`)
    }
    // 绑定的参数
    const status = value.hasOwnProperty('status') ? value.status : false
    const roles = store.getters && store.getters.roles
    const permissionRoles = value.role || []

    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })

    if (!hasPermission || (hasPermission && status)) {
      /**
      * TODO:
      * 1. 给父元素添加唯一id
      * 2. 同时找到子元素当前父元素的第几个位置
      */
      const rid = getRandomId()
      const index = getChildInParentPosition(el)
      el.parentNode.setAttribute('id', rid)
      el.dataset.id = rid
      el.dataset.index = index
      el.parentNode && el.parentNode.removeChild(el)
    }
    // 判断条件
    if (oldValue && oldValue && oldValue.status === true && value.status === false) {
      // 此处会在 update时触发
      const { index, id } = el.dataset
      const parent = document.getElementById(id)
      // 根据index找到需要插入父节点的位置
      parent.insertBefore(el, Array.from(parent.children)[index])
    }
  }
  export default {
    // 此处父元素存在
    inserted: permission,
    // 此处数据更新
    update: permission
  }

随机生成id

  function getRandomId () {
    var randomId = 'yxyxyxxyxyy'.replace(/[xy]/g, function (item) {
      var n = Math.random() * 12 | 0
      var v = item === 'x' ? n : (n & 0x3 | 0x8)
      v = item === 'y' ? 'abcdefghijklmnopqrstuvwsyz'.substr(Math.random() * 26 | 0, 1) : v
      return v.toString(16)
    })
    return randomId
  }

找到子节点在父节点中的位置

  function getChildInParentPosition (node) {
    // 用来保留子元素 【cloneNode(true) 深度克隆】
    const Parent = node.parentNode.cloneNode(true)
    let key = -1
    Array.from(Parent.children).filter((item, index) => {
      // 判断子节点是否相同 【isEqualNode】
      if (item.isEqualNode(node)) {
        key = index
      }
    })
    return key
  }