豫ICP备2024044691号-1
powered by emlog
vue3 按钮级别权限校验
Mins 2025-1-7 09:33 vue

在 main.js 里定义指令:

import permissionVerify from './permissionVerify'
const app = createApp(App)
app.directive('permission', permissionVerify) // 自定义指令: 按钮级别权限校验
app.mount('#app')

定义 permissionVerify.js

const getPermission = (key) => {
    if (key === undefined) return 'none'

    const split = key.split('.')
    const permission = JSON.parse(localStorage.getItem(storageNameEnum.userInfo)).permission
    return permission[split[0]][split[1]]
}

const permissionVerify = (el, binding) => {
    const permission = getPermission(binding.value)
    switch (permission) {
        case 'normal': break
        case 'hidden':
            el.style.cssText = 'visibility: hidden !important'
        break
        case 'disabled': // 本例适配 element-plus 的禁用属性
            el.classList.add('is-disabled')
            el.setAttribute('aria-disabled', 'true')
            el.setAttribute('disabled', 'true')
        break
        case 'none': 
        default:
            el.remove()
        break
    }
}
export default permissionVerify

权限列表字段要求:

permission: {
    home: { // home 页面
        list: 'hidden', // 隐藏,但占位
        createButton: 'normal', // 正常显示
        vipButton: 'none', // 不显示
        deleteButton: 'disabled', // 显示,但禁用
    }
}

页面里使用

<el-button v-permission="'home.createButton'">创建</el-button>
<el-button v-permission="'home.vipButton'">VIP</el-button>
<el-button v-permission="'home.deleteButton'">删除</el-button>