v-permission自定义权限指令

vue3后台项目中，有的时候角色并不拥有显示某一个组件的权限，需要用到自定义权限指令v-permission

利用install（app,options）函数来开发自定义指令 这个函数有两个参数，一个为vue构造原型，一个为可传入的配置项

install(app){
	app.directive("permission",{
		mounted(el,binding){
			//判断是否拥有权限，且判断传入的数据类型是否符合预期
			hasPermission(el,binding.value)
			//binding里面的value为使用指令传入的数据如  v-permission="['getStatistics1,GET']"
		}
	})
}

function hasPermission(value,el=false){
	//判断传入的数据是否符合自己设定的预期
	if(!Array.isArray(value)){
		//如果传入的不是数组则抛出错误
		throw new Error(`需要传入正确的数据类型`)
	}
	//判断是否拥有权限
	let data = store.state.ruleNames  //存储着是否拥有该请求权限的数组
	//如果在data中包含了传入的数据字段，则代表拥有权限，没有则返回 -1  此时如果为false 则代表没有权限
	let hasAuth = value.findIndex(v=>data.includes(v))!=-1
	//当使用的自定义指令dom存在时，且没有权限
	if(el && !hasAuth){
		//移除组件
		el.parentNode.removeChild(el)
	}
}
暴露出去在main.js中use
export default {
    install(app){
        // app 为根组件实例
        app.directive('permission',{
            mounted(el,binding) {
                hasPermission(binding.value,el)
            },
        })
    }
}