页面上怎么隐藏按钮

页面上怎么隐藏按钮

对接 owl-admin 的权限标识时，用 hasPerms 或 Perms。

<script setup lang="ts">
import { hasPerms, Perms } from "@bit-labs.cn/owl-ui";
</script>

<template>
  <el-button v-if="hasPerms('admin:order:Create')" type="primary">
    新建
  </el-button>

  <Perms value="admin:order:Delete">
    <el-button>删除</el-button>
  </Perms>
</template>

Perms 内部就是 hasPerms。通过则渲染默认插槽，否则什么都不渲染。

指令 v-perms 同样看 permissions。v-auth 和全局组件 Auth 看的是当前路由 meta.auths，适合前端自己定义的按钮编码，不是后端的 app:module:方法名。

字符串必须和后端按钮菜单上的权限标识完全一致，包括大小写和冒号。标识来自 子系统名:模块英文:方法名，例如 admin:user:Create。

隐藏只影响界面。接口仍要在后端标成「需要授权」。只做前端隐藏、接口却是「需要登录」，用户可以直接调接口。

权限改了按钮没变，先看 user-permissions-cache 是否还在 24 小时有效期内。重新登录或 fetchAndCachePermissions() 之后再看。