Vue权限指令
聂大哥 人气:0在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。
在后台系统中,最常用的就是权限指令。
权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此DOM。
在Vue中使用指令权限时,通常有两种控制节点的方法。第一个是对普通节点的指令控制(普通节点即是指 html 中的标签节点。),第二个则是对elementUI组件的控制。
为什么分两种呢?是因为在实际开发过程中,我发现自定义指令有时候无法移除element中的组件,例如:在使用el-tab时,下面包含了多个tab页,当某个tab页无权限访问时 想要对其进行移除,这时候自定义的指令只能移除此tab页内的内容,并不能够将此tab页一起移除。所以这时候会使用v-if进行控制。
第一种-自定义权限指令
我的写法是新建permission
文件夹,此文件夹下面包含index.js、permission.js
,接下来直接上代码:
index.js
import permission from './permission' import Vue from 'vue' Vue.directive('permission', permission)
permission.js
import store from '@/store' async function checkPermission(el, binding) { const { value } = binding const roles = await store.getters && store.getters.permission if( value && value instanceof Array) { if( value.length > 0) { const permissionRoles = value const hasPermission = roles.some(role => { return permissionRoles.includes(role) }) if(!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } }else { throw new Error('需要以数组的形式传角色') } } export default { inserted(el, binding) { checkPermission(el, binding) }, update(el, binding) { checkPermission(el, binding) } }
在这里面需要解释的是权限列表的获取,我的权限列表是存储在store的permission中,所以在进入的时候直接获取permission。
最重要的一步,需要将index.js引入到main.js中去执行。
main.js
import './permission' // 此引入需要在创建Vue实例之前引用
用法:
<el-button v-permission="['add']">权限按钮</el-button>
第二种:v-if自定义控制
如果使用第一种方式的话,其是移除当前DOM下的子节点,是没办法移除当前节点的。所以这时候就需要通过自定义的v-if来控制。
思路:v-if中执行一个函数,函数传入一个权限值。在函数中判断权限值是否属于权限菜单内,返回布尔类型值。
这时我们想到,如果要定义一个函数在任何组件中都可以使用,那么要么是工具类函数,要么是mixins。如果是封装工具类函数,则没办法直接在模板中使用,而是需要在methods中使用,所以我们直接选择mixins,混入方法。
我们创建控制节点的文件controlNode.js
import store from "@/store" export default { methods: { controlNode(node) { const permission = store.getters.permission let result = permission.includes(node) return result } } }
用法:
在组件中使用mixins
<template> <div> <el-tabs> <el-tab-pane v-if="controlNode('add')"></el-tab-pane> <el-tab-pane></el-tab-pane> </el-tabs> </div> </template> <script> import controlNode from "@/permission/controlNode" export default { name: "component", mixins: [controlNode] } </script>
最后说明
为什么控制节点权限要分两种情况?同样都是移除节点,为什么还要用v-if?
如果你仔细观察代码,在第一种方式中,我们移除的是 child,是将当前节点的子元素进行移除,此时当前节点依然存在。所以就出现了所分的两种情况。
那有没有办法用自定义的指令就可以完成移除呢?那当然是有的,在第一种方式中,只需要将removeChild
改为remove
即可。即将移除子元素改为移除当前节点本身。
加载全部内容