需要前后端一起配合,此处不对后端代码说明,后端即参与获取数据库用户权限数据。
一、显示是否具有按钮权限
<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
},
}