Vue按钮权限

需要前后端一起配合，此处不对后端代码说明，后端即参与获取数据库用户权限数据。

一、显示是否具有按钮权限

<el-button v-if="hasPerm('sysGrantMenu')" @click="openGrandMenu()">菜单授权</el-button>

如果该用户存在 sysGrantMenu 权限，则显示该按钮

二、多个按钮判断显示哪个

<a-divider type="vertical" v-if="hasPerm(['bizLinkEdit', 'bizLinkDelete'], 'and')" />

<a-divider> 是 Ant Design Vue 组件库中的一个分隔线（Divider）组件：
<a-divider> 组件有一个名为 "type" 的属性，其值设置为 "vertical"，以指定分隔线的类型为垂直分割线。

判断用户是否存在 bizLinkEdit 与 bizLinkDelete 两个权限，存在则都显示，任意一个不存在都不会显示

    if (hasPerm(['bizLinkEdit', 'bizLinkDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '150px'
		})
	}

根据用户是否具备 "bizLinkEdit" 或 "bizLinkDelete" 权限来动态添加一个操作列到 columns 数组中。
如果用户具备其中一个或两个权限，操作列将被添加到表格中，否则不会添加。

三、定义hadPerm方法

根据权限字符CODE查询数据库中是否包含：

import tool from '@/utils/tool'

/**
 * 权限判断是否能看到这个按钮，同时后端也做了校验，前端只是显示与不显示
 * @param {string, array} data 按钮的权限点，可以是单个字符串，也可以是数组
 * @param {string} rule or代表或，and代表与
 * 使用方法：
 * 例如 buttonCodeList 的数据为： ['button1', 'button2', 'button3']
 * 想要判断 button1 的权限，可以写成：hasPerm('button1')
 * 想要判断 button1 或 button2 的权限，可以写成：hasPerm(['button1', 'button2' ])
 *     - 要求用户具备 "button1" 或 "button2" 中的任何一个权限，只要满足其中一个条件就会返回 true
 * 想要判断 button1 与 button2 的权限，可以写成：hasPerm(['button1', 'button2' ], 'and')
 *     - 必须同时具备 "button1" 和 "button2" 两个权限，只有同时满足这两个条件才会返回 true
 *     - 如果用户只具备其中一个权限或没有这两个权限中的任何一个，条件将不满足，相应的操作将被禁止
 */
export function hasPerm(data, rule = 'or') {
	if (!data) {
		return false
	}
	const userInfo = tool.data.get('USER_INFO')
	if (!userInfo) {
		return false
	}
	const { buttonCodeList } = userInfo
	if (!buttonCodeList) {
		return false
	}
	if (Array.isArray(data)) {
		const fn = rule === 'or' ? 'some' : 'every'
		return data[fn]((item) => buttonCodeList.includes(item))
	}
	return buttonCodeList.includes(data)
}

tool.js：（即获取存储权限字符，用户存储的各种按钮的CODE）

const tool = {}

// localStorage
tool.data = {
    // 从本地存储中获取以 JSON 字符串形式存储的数据，并将其解析为 JavaScript 对象
    // 如果数据无法解析或不存在，则返回 null
	get(table) {
		let data = localStorage.getItem(table)
		try {
			data = JSON.parse(data)
		} catch (err) {
			return null
		}
		return data
	},
}