163 lines
5.0 KiB
Markdown
163 lines
5.0 KiB
Markdown
# Proposal: Add Button Permissions
|
||
|
||
## Summary
|
||
|
||
为系统中的所有页面添加按钮级权限控制，根据用户权限动态显示或隐藏按钮和操作。权限系统已实现(`hasAuth` 和 `v-permission` 指令)，本提案专注于将权限控制应用到所有相关页面。
|
||
|
||
## Motivation
|
||
|
||
当前系统已经实现了基于角色的权限控制(RBAC)，但大多数页面的按钮和操作缺少权限控制。这意味着所有用户都能看到所有按钮，即使他们没有权限执行相应操作。需要在UI层面根据用户权限隐藏无权限的按钮，提升用户体验和系统安全性。
|
||
|
||
### Problems Solved
|
||
|
||
1. **安全性提升**: 防止用户看到或尝试执行无权限操作
|
||
2. **用户体验优化**: 只显示用户有权限的功能，避免混淆
|
||
3. **权限一致性**: 统一所有页面的权限控制实现方式
|
||
|
||
### Related Work
|
||
|
||
- 权限系统基础设施已实现 (`useAuth.ts`, `permission.ts`)
|
||
- 系统/角色页面 (`/system/role`) 已实现权限控制，作为最佳实践参考
|
||
- 权限配置已由后端API提供（见文档中的权限JSON结构）
|
||
|
||
## Proposed Solution
|
||
|
||
### Approach
|
||
|
||
按业务模块逐步为所有页面添加按钮权限控制，使用已有的权限基础设施：
|
||
|
||
1. **表格操作按钮**: 使用 `v-permission` 指令
|
||
2. **表格内操作**: 使用 `hasAuth()` 函数动态渲染
|
||
3. **状态切换控件**: 使用 `disabled: !hasAuth()` 控制禁用状态
|
||
|
||
### Affected Modules
|
||
|
||
根据提供的权限JSON，需要添加权限控制的模块包括：
|
||
|
||
1. **套餐管理** (`/package-management`)
|
||
- 套餐系列 (`package-series`)
|
||
- 套餐列表 (`package-list`)
|
||
- 单套餐分配 (`package-assign`)
|
||
- 套餐系列分配 (`series-assign`)
|
||
|
||
2. **店铺管理** (`/shop-management`)
|
||
- 店铺列表 (`list`)
|
||
|
||
3. **账号管理** (`/account-management`)
|
||
- 账号列表 (`account`)
|
||
- 平台账号 (`platform-account`)
|
||
- 代理账号 (`shop-account`)
|
||
|
||
4. **资产管理** (`/asset-management`)
|
||
- IoT卡管理 (`iot-card-management`)
|
||
- IoT卡任务 (`iot-card-task`)
|
||
- 设备任务 (`device-task`)
|
||
- 设备管理 (`devices`)
|
||
- 授权记录 (`authorization-records`)
|
||
|
||
5. **账户管理** (`/account`)
|
||
- 企业客户 (`enterprise-customer`)
|
||
- 运营商管理 (`carrier-management`)
|
||
- 订单管理 (`orders`)
|
||
- 佣金管理 (`commission/*`)
|
||
|
||
### Implementation Pattern
|
||
|
||
基于 `/system/role` 页面的实现，统一使用以下模式：
|
||
|
||
```vue
|
||
<script setup>
|
||
import { useAuth } from '@/composables/useAuth'
|
||
|
||
const { hasAuth } = useAuth()
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 1. 表格头部按钮 -->
|
||
<template #left>
|
||
<ElButton v-permission="'module:add'">新增</ElButton>
|
||
</template>
|
||
|
||
<!-- 2. 表格列中的状态切换 -->
|
||
<ElSwitch
|
||
:disabled="!hasAuth('module:update_status')"
|
||
v-model="row.status"
|
||
/>
|
||
|
||
<!-- 3. 表格列中的操作按钮 -->
|
||
<script>
|
||
const columns = [{
|
||
prop: 'operation',
|
||
formatter: (row) => {
|
||
const buttons = []
|
||
|
||
if (hasAuth('module:edit')) {
|
||
buttons.push(h(ArtButtonTable, { type: 'edit', onClick: () => edit(row) }))
|
||
}
|
||
|
||
if (hasAuth('module:delete')) {
|
||
buttons.push(h(ArtButtonTable, { type: 'delete', onClick: () => del(row) }))
|
||
}
|
||
|
||
return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
|
||
}
|
||
}]
|
||
</script>
|
||
</template>
|
||
```
|
||
|
||
### Permission Mapping
|
||
|
||
权限代码 (`perm_code`) 与操作的映射关系：
|
||
|
||
- `module:add` -> 新增按钮
|
||
- `module:edit` -> 编辑按钮
|
||
- `module:delete` -> 删除按钮
|
||
- `module:update_status` -> 状态切换
|
||
- `module:update_xxx` -> 特定更新操作（如修改密码、修改成本价等）
|
||
- `module:xxx` -> 特殊操作（如分配权限、查看客户、卡授权等）
|
||
|
||
## Impact Analysis
|
||
|
||
### Benefits
|
||
|
||
1. **提升安全性**: UI层面防止无权限操作
|
||
2. **改善UX**: 用户只看到有权限的功能
|
||
3. **统一体验**: 所有页面使用相同的权限控制模式
|
||
|
||
### Risks
|
||
|
||
1. **向后兼容性**: 现有页面需要更新，可能影响用户使用习惯
|
||
2. **测试覆盖**: 需要测试各种权限组合的显示效果
|
||
|
||
### Mitigations
|
||
|
||
1. 分模块逐步rollout，优先完成核心模块
|
||
2. 权限配置由后端控制，前端只负责显示/隐藏
|
||
3. 保持API层面的权限检查，前端权限控制仅为UI优化
|
||
|
||
## Success Criteria
|
||
|
||
- [ ] 所有模块的按钮根据权限正确显示/隐藏
|
||
- [ ] 状态切换控件根据权限正确启用/禁用
|
||
- [ ] 表格操作列根据权限动态渲染按钮
|
||
- [ ] 权限变更后UI立即响应
|
||
- [ ] 无权限用户看不到任何无权限操作
|
||
|
||
## Dependencies
|
||
|
||
- 依赖后端 API 返回正确的权限数据
|
||
- 依赖 `useUserStore` 中的权限数据管理
|
||
- 依赖已实现的 `useAuth` 和 `v-permission` 指令
|
||
|
||
## Timeline
|
||
|
||
预计需要 5-7 个工作日完成所有模块的权限控制集成。
|
||
|
||
## References
|
||
|
||
- 权限文档: `docs/在页面上新增按钮权限.md`
|
||
- 参考实现: `src/views/system/role/index.vue`
|
||
- 权限指令: `src/directives/permission.ts`
|
||
- 权限组合式函数: `src/composables/useAuth.ts`
|