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'] = permissionVue.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 } = bindinglet auths =  sessionStorage.getItem('pvAuths')?JSON.parse(sessionStorage.getItem('pvAuths')):[];if(!auths) {auths = []}if (typeof value === 'undefined') {return true}const btnPermission = valueconst 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)
})