@bams-app/permission¶
📄 创建: 刘泽伟 2026-08-04
角色权限管理插件包，提供指令、组件和函数三种方式进行权限控制。权限数据统一从 @bams-app/store 的用户 store 中获取。
安装¶
在项目入口文件（如 main.js）中安装插件：
import { createApp } from "vue";
import permission from "@bams-app/permission";
const app = createApp(App);
// 全局安装指令 v-permission 和组件 <AuthPermission />
app.use(permission);
app.mount("#app");
功能特性¶
1. 指令方式 (推荐)¶
通过 v-permission 指令控制元素的显示与隐藏。如果用户没有指定权限，该元素将从 DOM 中移除。
<!-- 单个权限码 -->
<el-button v-permission="'meter:export'">导出</el-button>
<!-- 多个权限码（满足其中一个即可） -->
<el-button v-permission="['meter:export', 'meter:delete']">操作</el-button>
2. 组件方式¶
使用 <AuthPermission /> 组件包裹需要权限控制的内容。
<AuthPermission code="meter:delete">
<el-button>删除</el-button>
</AuthPermission>
<!-- 多个权限码 -->
<AuthPermission :code="['meter:delete', 'meter:edit']">
<el-button>编辑</el-button>
</AuthPermission>
3. JS 函数判断¶
在逻辑代码中使用 hasPerm 函数进行判断。
<script setup>
import { hasPerm } from "@bams-app/permission";
if (hasPerm("meter:config")) {
// 执行有权限时的逻辑
console.log("用户拥有配置权限");
}
</script>
权限数据来源¶
本插件依赖于 @bams-app/store 中的 user store。
- 权限字段:
userStore.permissionMap(对象类型，存储页面路径对应的权限码列表) - 超级管理员: 如果
userStore.role === 'admin'，hasPerm将始终返回true。
权限码层级说明¶
权限码支持多级嵌套结构，采用冒号（:）分隔，格式为 模块：子模块：操作，支持通配符（*）匹配。
层级规则¶
- 模块级授权：
meter- 匹配meter模块下的所有权限 - 操作级授权：
meter:export- 可匹配meter:export，也可兼容更细粒度权限如meter:list:export - 细粒度权限：
meter:list:export- 表示meter模块下list场景的export操作 - 通配符授权：
meter:*、system:user:*- 匹配对应前缀下的所有权限
权限匹配逻辑¶
权限判断支持以下几类规则：
- 精确匹配：
meter:export命中meter:export - 模块级匹配：
meter可匹配meter:view、meter:list:export - 向上兼容：
meter:export可匹配meter:list:export - 通配符匹配：
meter:*、system:user:*可匹配对应前缀下所有权限
示例¶
// permissionMap 配置示例
{
"/meter/list": [
"meter:view",
"meter:export",
"meter:delete"
],
"/system/user": [
"system:user:*", // 匹配 system:user 下所有操作
"system:role:view" // 仅匹配 system:role:view
]
}
// hasPerm 判断示例
hasPerm("meter:view") // true - 精确匹配
hasPerm("meter:list:view") // true - 向上兼容匹配到 meter:view
hasPerm("meter:list:export") // true - 可被 meter 或 meter:export 命中
hasPerm("system:user:add") // true - 通配符匹配 system:user:*
hasPerm("system:user:delete") // true - 通配符匹配 system:user:*
hasPerm("system:role:edit") // false - 仅配置了 system:role:view
API¶
AuthPermission Props¶
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| code | 权限码或权限码数组 | string \| string[] |
- |