亲宝软件园·资讯

展开

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即可。即将移除子元素改为移除当前节点本身。

加载全部内容

相关教程
猜你喜欢
用户评论