vxe 组件内建了一套简洁的权限控制机制，它不依赖任何第三方库，能让我们灵活地控制组件（如按钮、链接等）的显隐和禁用状态。
这套机制的核心是 permissionMethod 全局配置，它定义了一个统一的权限校验方法。一旦配置好，只需在组件上添加一个 permission-code 属性，并传入对应的权限码，组件便会自动根据校验结果改变状态。
配置
import { VxeUI } from 'vxe-pc-ui'// 例如：后端获取用户路由权限数据
const userRouteMaps = {'user:add': true, // 拥有新增用户的权限'user:edit': true, // 拥有编辑用户的权限'data:export': false, // 没有导出数据的权限
}VxeUI.setConfig({// 全局权限码控制方法permissionMethod ({ code }) {if (userRouteMaps[code]) {return {// 是否可视visible: false,// 是否禁用disabled: false}}return {visible: true,disabled: false}}
})
权限校验的核心逻辑就是通过返回的 visible 和 disabled 两个布尔值，来精确控制组件的最终状态
组件使用：通过 permission-code 控制
配置好全局方法后，就可以在支持该功能的组件上使用 permission-code 属性了。以下是一个基础示例，展示了如何控制按钮和链接组件。
<template><!-- 只有拥有 'user:add' 权限时，此按钮才可见 --><vxe-button permission-code="user:add">新增用户</vxe-button><!-- 只有拥有 'data:export' 权限时，此链接才可见 --><vxe-link permission-code="data:export">导出数据</vxe-link>
</template>
多权限码：使用 | 实现"或"逻辑
<template><!-- 只要拥有 'user:add' 或 'user:edit' 任一权限，此按钮即可见 --><vxe-button permission-code="user:add|user:edit">用户管理</vxe-button>
</template>
方法调用：在 JavaScript 中进行权限检查
除了在模板中声明式地使用，有时我们可能需要在 JavaScript 逻辑中主动进行权限判断。VxeUI.permission 对象提供了几个便捷方法，方便你进行命令式的权限检查。
| API | 说明 |
|---|---|
| checkVisible(code) | 判断给定的权限码是否"可见" （即拥有权限） |
| checkDisable(code) | 判断给定的权限码是否"禁用" |
| getCheckInfo(code) | 获取更详细的权限检查信息，返回 { visible, disabled } 对象 |
// 场景：在某个操作执行前，检查用户是否有权限
if (VxeUI.permission.checkVisible('data:export')) {// 拥有权限，执行导出操作exportData()
} else {// 无权限，给出提示console.warn('您没有导出数据的权限！')
}// 使用 "|" 分隔符进行"或"逻辑判断
if (VxeUI.permission.checkVisible('user:add|user:edit')) {// 拥有 user:add 或 user:edit 任一权限时，显示某个功能showManagePanel()
}
如果你的权限判断逻辑只涉及简单的“有或无”，那么这套内置机制足够简洁高效。
https://vxeui.com