vue 项目中使用v-permission 权限控制

1.src\directive\permission下新建permission.js

2.permission.js中内容：

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters && store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value

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

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
        el.style.display="none"
      }
      // console.log("roles",roles);
      // console.log("binding",binding);
    } else {     
      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
  }
}

3.src\directive\index.js中

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight'
import clipboard from './module/clipboard'
import permission from './permission/permission'  //添加的内容

const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
  Vue.directive('clipboard', clipboard)
  Vue.directive('dialogDrag', dialogDrag)
  Vue.directive('dialogDragWidth', dialogDragWidth)
  Vue.directive('dialogDragHeight', dialogDragHeight)
  Vue.directive('permission', permission) //添加的内容
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  window['permission'] = permission    //添加的内容
  Vue.use(install); // eslint-disable-line
}

export default install

4.页面中使用

 <div v-permission="['admin','user']"> </div>