自定义指令

配置菜单按钮权限时第一个想到的方案便是自定义指令------一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

如果是只做H5端或者APP端的话就可以直接使用自定义指令，下面的替代方案就可以不用看了，下面是自定义指令的使用方法。

在项目的根目录下新建一个文件夹-directives

模块化-在directives文件夹下新建一个module文件夹和index.js文件

自定义权限指令-在module文件夹下新建permissions.js文件，在mounted挂载生命周期进行权限的判断

自定义权限指令代码

export const permission = {
	mounted: (el, bidding) => {
		//获取自定义指令传入的值
		const {
			value
		} = bidding
		//获取用户权限
		const userPermissions = uni.getStorageSync('userInfo')?.roleFunctionInfoResVOS

		//判断是否正确使用自定义指令
		if (value && value != '') {
			const hasPermission = userPermissions.some(user => {
				return value.includes(user.functionCode)
			})


			if (!hasPermission) {
				el.style.display = 'none'
			}
		} else {
			throw new Error('使用该自定义指令必须如：v-permission="[add,delete]"')
		}

	}
}

在index.js中导出

最后一步，在min.js中注册指令以便在页面中使用

给页面中按钮增加权限配置

---

微信小程序不支持自定义指令，可以使用以下方案和H5兼容使用

此方案的思路是：结合全局变量和v-if判断用户是否有该权限，如果有该权限v-if为true，按钮显示。没有权限v-if为false，按钮不显示。

首先是写出一个通用方法判断用户是否有该权限，用户信息缓存在用户本地，通过传入给通用权限方法的参数判断用户是否有权限。

//按钮权限
export function auth(authList){
	//获取用户信息
	const userInfo = uni.getStorageSync('userInfo')
	return userInfo?.roleFunctionInfoResVOS?.some(auth=>{
		return authList.includes(auth.functionCode)
	})
}

最后在main.js中将上面方法注册为全局变量

使用方法–在v-if中使用如 v-if = “$auth([‘add’])”