186 lines
4.3 KiB
Markdown
186 lines
4.3 KiB
Markdown
# 权限按钮显示配置说明
|
||
|
||
## 功能说明
|
||
|
||
此配置用于控制操作按钮（如添加、编辑、删除）在没有权限时是否显示在页面上。
|
||
|
||
## 配置项
|
||
|
||
在 `.env` 文件中添加以下配置：
|
||
|
||
```env
|
||
# 是否显示无权限的操作按钮
|
||
# false: 不显示（默认）- 用户没有权限时，按钮完全隐藏
|
||
# true: 显示但禁用 - 用户没有权限时，按钮显示但处于禁用状态
|
||
ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=false
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
- **默认值**: `false`（不显示）
|
||
- **类型**: 布尔值（`true` 或 `false`）
|
||
- **作用范围**: 全局配置，影响所有页面的操作按钮
|
||
|
||
### 配置效果
|
||
|
||
#### `ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=false`（默认）
|
||
- 用户没有权限时，按钮**完全隐藏**
|
||
- 页面更加简洁，用户看不到无法使用的功能
|
||
|
||
#### `ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=true`
|
||
- 用户没有权限时，按钮**显示但禁用**
|
||
- 用户可以知道有哪些功能，但无法使用
|
||
- 适合需要让用户了解系统完整功能的场景
|
||
|
||
## 使用方法
|
||
|
||
### 在 Vue 组件中使用
|
||
|
||
#### 方法一：使用 `getButtonState`（推荐，一个方法搞定）
|
||
|
||
**方式一：同时控制显示和禁用（根据配置决定是否隐藏）**
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<!-- 根据配置和权限决定是否显示按钮 -->
|
||
<el-button
|
||
v-if="getButtonState('admin.store').show"
|
||
:disabled="getButtonState('admin.store').disabled"
|
||
@click="handleAdd"
|
||
>
|
||
添加
|
||
</el-button>
|
||
|
||
<el-button
|
||
v-if="getButtonState('admin.update').show"
|
||
:disabled="getButtonState('admin.update').disabled"
|
||
@click="handleEdit(row)"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
|
||
<el-button
|
||
v-if="getButtonState('admin.destroy').show"
|
||
:disabled="getButtonState('admin.destroy').disabled"
|
||
@click="handleDelete(row)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { usePermission } from '@/composables/usePermission'
|
||
|
||
const { getButtonState } = usePermission()
|
||
</script>
|
||
```
|
||
|
||
**方式二：只控制禁用（按钮始终显示，无权限时禁用）**
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<!-- 按钮始终显示，无权限时禁用 -->
|
||
<el-button
|
||
:disabled="getButtonState('admin.store').disabled"
|
||
@click="handleAdd"
|
||
>
|
||
添加
|
||
</el-button>
|
||
|
||
<el-button
|
||
:disabled="getButtonState('admin.update').disabled"
|
||
@click="handleEdit(row)"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
|
||
<el-button
|
||
:disabled="getButtonState('admin.destroy').disabled"
|
||
@click="handleDelete(row)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { usePermission } from '@/composables/usePermission'
|
||
|
||
const { getButtonState } = usePermission()
|
||
</script>
|
||
```
|
||
|
||
#### 方法二：使用两个方法（兼容旧代码）
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<el-button
|
||
v-if="shouldShowButton('admin.store')"
|
||
:disabled="isButtonDisabled('admin.store')"
|
||
@click="handleAdd"
|
||
>
|
||
添加
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { usePermission } from '@/composables/usePermission'
|
||
|
||
const { shouldShowButton, isButtonDisabled } = usePermission()
|
||
</script>
|
||
```
|
||
|
||
#### 方法三：直接使用 store
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<el-button
|
||
v-if="userStore.shouldShowButton('admin.store')"
|
||
:disabled="!userStore.hasPermission('admin.store')"
|
||
@click="handleAdd"
|
||
>
|
||
添加
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useUserStore } from '@/store/user'
|
||
|
||
const userStore = useUserStore()
|
||
</script>
|
||
```
|
||
|
||
## 权限标识说明
|
||
|
||
权限标识格式通常为：`模块.操作`
|
||
|
||
常见示例：
|
||
- `admin.store` - 添加管理员
|
||
- `admin.update` - 编辑管理员
|
||
- `admin.destroy` - 删除管理员
|
||
- `role.store` - 添加角色
|
||
- `role.update` - 编辑角色
|
||
- `permission.index` - 查看权限列表
|
||
|
||
## 注意事项
|
||
|
||
1. 配置修改后需要重启后端服务才能生效
|
||
2. 前端会在用户登录时自动获取配置，无需刷新页面
|
||
3. 如果用户有权限，按钮总是会显示（不受此配置影响）
|
||
4. 此配置只影响按钮的显示/隐藏，不影响后端权限验证
|
||
|
||
## 相关文件
|
||
|
||
- 后端配置：`config/admin.go`
|
||
- 后端 API：`app/http/controllers/admin/auth_controller.go`
|
||
- 前端 Store：`html/src/store/user.js`
|
||
- 前端工具：`html/src/composables/usePermission.js`
|
||
|