前端权限验证之自定义指令v-permission

在前端处理按钮权限

使用vue自定义指令来v-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

// permission.js文件
import store from '@/store'function checkPermission(el, binding) {const { value } = bindingconst roles = store.getters && store.getters.rolesif (value && value instanceof Array) {if (value.length > 0) {const permissionRoles = valueconst hasPermission = roles.some(role => {return permissionRoles.includes(role)})if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el)}}} else {throw new Error(`need roles! Like v-permission="['admin','editor']"`)}
}export default {inserted(el, binding) {checkPermission(el, binding)},update(el, binding) {checkPermission(el, binding)}
}

在代码中使用

<template><!-- Admin can see this --><el-tag v-permission="['admin']">admin</el-tag><!-- Editor can see this --><el-tag v-permission="['editor']">editor</el-tag><!-- Editor can see this --><el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template><script>
// 当然你也可以为了方便使用，将它注册到全局
import permission from '@/directive/permission/index.js' // 权限判断指令
export default{directives: { permission }
}
</script>

可以使用全局权限判断函数，用法和指令 v-permission 类似。

<template><el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane><el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane><el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template><script>
import checkPermission from '@/utils/permission' // 权限判断函数export default{methods: {checkPermission}
}
</script>