vue v-permission权限指令

控制页面及按钮的显示隐藏

• src/directive/permission/index.js

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

• src/directive/permission/permission.js

import store from '@/store'

function checkPermission(el, binding) {
  const { value } = binding
  let auths =  sessionStorage.getItem('pvAuths')?JSON.parse(sessionStorage.getItem('pvAuths')):[];
  if(!auths) {
    auths = []
  }
  if (typeof value === 'undefined') {
    return true
  }
  const btnPermission = value

  const hasPermission =  auths.includes(btnPermission);

  if (!hasPermission) {
    el.parentNode && el.parentNode.removeChild(el)
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  },
}

• src/directive/index.js

export * as Permission  from './permission';

• 在main.js中使用

import * as directives from '@/directive' // global directives
Object.keys(directives).forEach(key => {
  Vue.use(directives[key].default)
})