BizAuthButton 权限按钮

按钮级权限收口：权限码对照权限集合判定，无权限时隐藏或禁用置灰；属性 / 事件 / 插槽全量透传给 BizButton（继承 el-button 全部能力）。配套 v-auth 指令控制任意元素。权限集合来源两级：组件级 permissions 优先，其次 configureBizAuth() 全局注入；两者皆未配置时默认放行（避免权限服务未接入阻塞页面）。

基础用法（隐藏）

已注入 ['order:add', 'order:export']：删除按钮被隐藏；el-button 的 type / icon / 事件等属性全量透传

configureBizAuth 注入权限码数组，无权按钮不渲染。

<script setup lang="ts">
/** 场景：权限收口基础用法——configureBizAuth 注入当前用户权限码，无权按钮直接隐藏 */
import { onMounted } from 'vue'
import { ElAlert } from 'element-plus'
import { BizAuthButton, configureBizAuth } from 'vue3-ep-biz-lib'

onMounted(() => {
  // 实际项目在登录态就绪后注入：configureBizAuth(登录接口返回的权限码数组)
  configureBizAuth(['order:add', 'order:export'])
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 10px">
      <BizAuthButton code="order:add" type="primary">新增订单</BizAuthButton>
      <BizAuthButton code="order:export" type="success">导出订单</BizAuthButton>
      <!-- 当前用户没有 order:delete，不渲染 -->
      <BizAuthButton code="order:delete" type="danger">删除订单</BizAuthButton>
    </div>
    <ElAlert
      type="info"
      :closable="false"
      show-icon
      title="已注入 ['order:add', 'order:export']：删除按钮被隐藏；el-button 的 type / icon / 事件等属性全量透传"
    />
  </div>
</template>

显示代码

无权置灰

mode="disable" 保留占位提示「功能存在但未授权」。

<script setup lang="ts">
/** 场景：无权置灰——mode=disable 保留占位提示用户功能存在但未授权 */
import { onMounted } from 'vue'
import { BizAuthButton, configureBizAuth } from 'vue3-ep-biz-lib'

onMounted(() => {
  configureBizAuth(['order:view'])
})
</script>

<template>
  <div style="display: flex; gap: 10px">
    <BizAuthButton code="order:view">查看详情</BizAuthButton>
    <BizAuthButton code="order:audit" mode="disable" type="warning">批量审核（需授权）</BizAuthButton>
    <BizAuthButton code="order:delete" mode="disable" type="danger">删除</BizAuthButton>
  </div>
</template>

显示代码

数组任一命中 / 函数断言

code 传数组时「任一命中即放行」，如 :code 绑定 ['order:add', 'batch:add']

code 传数组时任一命中即放行；权限集合支持 (code) => boolean 断言函数（通配权限模型）。

<script setup lang="ts">
/** 场景：数组任一命中 + 函数断言——权限集合支持 code 数组或自定义判定函数 */
import { onMounted } from 'vue'
import { ElAlert } from 'element-plus'
import { BizAuthButton, configureBizAuth } from 'vue3-ep-biz-lib'

onMounted(() => {
  // 函数断言：任意以 user: 开头的权限码都放行（适合通配权限模型）
  configureBizAuth((code: string) => code.startsWith('user:'))
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 10px">
      <!-- 函数断言：user:* 放行 -->
      <BizAuthButton code="user:create" type="primary">新建账号</BizAuthButton>
      <BizAuthButton code="user:reset-password" type="warning">重置密码</BizAuthButton>
      <!-- 不命中 user: 前缀，隐藏 -->
      <BizAuthButton code="system:shutdown" type="danger">关闭系统</BizAuthButton>
    </div>
    <ElAlert
      type="info"
      :closable="false"
      show-icon
      title="code 传数组时「任一命中即放行」，如 :code 绑定 ['order:add', 'batch:add']"
    />
  </div>
</template>

显示代码

v-auth 指令

发布开关（无权置灰）

查看修订历史（a 标签）

v-auth="'code'" 隐藏任意元素；v-auth.disable="'code'" 置灰原生按钮 / 开关等。

<script setup lang="ts">
/** 场景：v-auth 指令——任意元素权限控制；.disable 修饰符置灰 */
import { onMounted } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'
import { configureBizAuth, vAuth } from 'vue3-ep-biz-lib'

onMounted(() => {
  configureBizAuth(['doc:edit'])
})
</script>

<template>
  <div style="display: flex; gap: 10px; align-items: center">
    <ElButton v-auth="'doc:edit'" type="primary">编辑文档（el-button 指令控制）</ElButton>
    <ElSwitch v-auth.disable="'doc:publish'" active-text="发布开关（无权置灰）" />
    <a v-auth="'doc:edit'" href="javascript:void(0)" style="color: var(--el-color-primary)">查看修订历史（a 标签）</a>
  </div>
</template>

显示代码

useAuth 编程式判定

订单 内容区

风控 内容区

操作日志 内容区

订单

风控

操作日志

无权页签直接不渲染（hasAuth 在模板中响应式，权限集合变更即更新）

useAuth().hasAuth(code) 在模板 / computed 中响应式判定：tab 页签、区块显隐、路由守卫等非按钮场景统一收口。

<script setup lang="ts">
/** useAuth 编程式判定：tab 页签 / 区块 / 路由级权限（非按钮场景） */
import { computed, ref } from 'vue'
import { configureBizAuth, useAuth } from 'vue3-ep-biz-lib'

const { hasAuth } = useAuth()

const perms = ref<string[]>(['order:view', 'order:export'])
const apply = (): void => configureBizAuth(perms.value)

const tabs = computed(() => [
  { name: 'order', label: '订单', auth: 'order:view' },
  { name: 'risk', label: '风控', auth: 'order:risk' },
  { name: 'log', label: '操作日志', auth: 'order:log' },
])
const active = ref('order')
</script>

<template>
  <div class="box">
    <div class="ops">
      <ElSelect v-model="perms" multiple style="width: 280px" placeholder="当前权限码">
        <ElOption v-for="c in ['order:view', 'order:export', 'order:risk', 'order:log']" :key="c" :value="c" :label="c" />
      </ElSelect>
      <ElButton type="primary" @click="apply">configureBizAuth 注入</ElButton>
    </div>

    <ElTabs v-model="active">
      <ElTabPane v-for="tab in tabs.filter((t) => hasAuth(t.auth))" :key="tab.name" :name="tab.name" :label="tab.label">
        {{ tab.label }} 内容区
      </ElTabPane>
    </ElTabs>
    <div class="tip">无权页签直接不渲染（hasAuth 在模板中响应式，权限集合变更即更新）</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ops {
  display: flex;
  gap: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

组件级权限覆盖

组件级 permissions 优先于全局配置：适用于演示环境、白名单页面等特殊场景

特殊页面用 permissions 指定局部权限集合，不依赖全局注入。

<script setup lang="ts">
/** 场景：局部覆盖——特殊页面用组件级 permissions 指定权限集合，不依赖全局注入 */
import { ElAlert } from 'element-plus'
import { BizAuthButton } from 'vue3-ep-biz-lib'

// 全局未 configureBizAuth（默认放行），本页面用 permissions 收紧
const localPermissions = ['report:export']
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 10px">
      <BizAuthButton code="report:export" :permissions="localPermissions" type="success">
        导出报表
      </BizAuthButton>
      <BizAuthButton code="report:offline" :permissions="localPermissions" mode="disable">
        线下归档（未授权）
      </BizAuthButton>
      <!-- 未传 code 的按钮不受权限控制 -->
      <BizAuthButton>普通操作</BizAuthButton>
    </div>
    <ElAlert
      type="info"
      :closable="false"
      show-icon
      title="组件级 permissions 优先于全局配置：适用于演示环境、白名单页面等特殊场景"
    />
  </div>
</template>

显示代码

列表工具栏权限组合

新增 / 导出 / 批量删除按权限码分别收口（含图标透传与 @click）。

<script setup lang="ts">
/** 场景：列表工具栏权限组合——新增 / 导出 / 批量删除按权限码分别收口 */
import { onMounted } from 'vue'
import { ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { Delete, Download, Plus } from '@element-plus/icons-vue'
import { BizAuthButton, configureBizAuth } from 'vue3-ep-biz-lib'

onMounted(() => {
  configureBizAuth(['goods:add', 'goods:export'])
})

const rows = [
  { id: 1, name: '机械键盘 87 键', status: '在售' },
  { id: 2, name: '无线鼠标', status: '在售' },
]
</script>

<template>
  <div style="max-width: 640px">
    <div style="display: flex; gap: 10px; margin-bottom: 12px">
      <BizAuthButton code="goods:add" type="primary" :icon="Plus" @click="ElMessage.info('打开新增弹窗')">
        新增商品
      </BizAuthButton>
      <BizAuthButton code="goods:export" type="success" :icon="Download" @click="ElMessage.info('导出 Excel')">
        导出
      </BizAuthButton>
      <BizAuthButton code="goods:delete" type="danger" :icon="Delete" mode="disable">
        批量删除
      </BizAuthButton>
    </div>

    <ElTable :data="rows" border size="small">
      <ElTableColumn prop="id" label="ID" width="60" />
      <ElTableColumn prop="name" label="商品名称" />
      <ElTableColumn prop="status" label="状态" width="90">
        <template #default="{ row }">
          <ElTag size="small" type="success">{{ row.status }}</ElTag>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
code	string | string[]	—	权限码；数组为任一命中即放行；不传则不受权限控制
mode	'hide' | 'disable'	'hide'	无权限处理方式：隐藏 / 禁用置灰
permissions	string[] | ((code: string) => boolean)	—	组件级权限集合，优先于全局配置

其余属性（type / size / icon / loading / plain / @click …）经 $attrs 全量透传 BizButton → el-button。

全局 API

名称	说明
configureBizAuth(permissions?)	登录态就绪后注入全局权限集合；undefined 表示不启用（默认放行）
getBizAuthPermissions()	响应式读取全局权限集合（自定义扩展消费）
vAuth	v-auth 指令对象（按需导入场景局部注册）
useAuth()	编程式权限判定（hasAuth(code) 模板中响应式；permissions 响应式集合）

import { configureBizAuth, vAuth } from 'vue3-ep-biz-lib'

configureBizAuth(['order:add', 'order:export'])
app.use(Vue3EpBizLib) // 全局安装时自动注册 v-auth 指令

指令用法

<ElButton v-auth="'doc:edit'">编辑</ElButton>
<ElSwitch v-auth.disable="'doc:publish'" />