跳到主要内容

按钮权限控制

实现列表按钮权限控制

一、前端页面通过指令 v-auth等方式控制权限​

1. 按钮显示与隐藏控制​

按钮显示隐藏可通过函数和指令2种方式进行控制

  • 函数方式(hasPermission) user:add 为后台添加的权限编码

引入方法 hasPermission 

import { usePermission } from '/@/hooks/web/usePermission'
const { hasPermission } = usePermission();

使用方法 hasPermission 控制按钮权限

<a-button  type="primary"  v-if="hasPermission('user:add')"> 新增</a-button>
  • 指令方式(v-auth) user:add 为后台添加的权限编码
<a-button  type="primary"   v-auth="'user:add'" @click="handleCreate" > 新增</a-button>

2. 按钮禁用控制​

按钮禁用通过 antd vue 组件提供的禁用属性进行控制

<a-button type="primary" :disabled="isDisabledAuth('system:user:export')"> 导出</a-button>

操作列(TableAction)按钮显示隐藏控制​

{
  label: '删除',
  icon: 'ic:outline-delete-outline',
  onClick: handleDelete.bind(null, record),
  auth: 'user:add', //通过权限指令控制显示（有权限显示/无权限不显示）
},

二、配置按钮权限菜单​

后台进入菜单管理页面配置按钮权限菜单

三、后台通过java注解控制按钮请求​

如果因为没有权限导致无法操作，可以暂时注释掉@RequiresPermissions，授权后再放开

四、角色授权按钮​

进入角色管理授权按钮（授权后即可看见按钮）