luo/one-pipe-system

Fork 0

Files

sexygoat 192c6f1d26

构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m25s

Details

fetch(modify):完善按钮权限

2026-02-03 17:20:50 +08:00

5.0 KiB

Raw Blame History

Proposal: Add Button Permissions

Summary

为系统中的所有页面添加按钮级权限控制，根据用户权限动态显示或隐藏按钮和操作。权限系统已实现(hasAuth 和 v-permission 指令)，本提案专注于将权限控制应用到所有相关页面。

Motivation

当前系统已经实现了基于角色的权限控制(RBAC)，但大多数页面的按钮和操作缺少权限控制。这意味着所有用户都能看到所有按钮，即使他们没有权限执行相应操作。需要在UI层面根据用户权限隐藏无权限的按钮，提升用户体验和系统安全性。

Problems Solved

安全性提升: 防止用户看到或尝试执行无权限操作
用户体验优化: 只显示用户有权限的功能，避免混淆
权限一致性: 统一所有页面的权限控制实现方式

权限系统基础设施已实现 (useAuth.ts, permission.ts)
系统/角色页面 (/system/role) 已实现权限控制，作为最佳实践参考
权限配置已由后端API提供（见文档中的权限JSON结构）

Proposed Solution

Approach

按业务模块逐步为所有页面添加按钮权限控制，使用已有的权限基础设施：

表格操作按钮: 使用 v-permission 指令
表格内操作: 使用 hasAuth() 函数动态渲染
状态切换控件: 使用 disabled: !hasAuth() 控制禁用状态

Affected Modules

根据提供的权限JSON，需要添加权限控制的模块包括：

套餐管理 (/package-management)
- 套餐系列 (package-series)
- 套餐列表 (package-list)
- 单套餐分配 (package-assign)
- 套餐系列分配 (series-assign)
店铺管理 (/shop-management)
- 店铺列表 (list)
账号管理 (/account-management)
- 账号列表 (account)
- 平台账号 (platform-account)
- 代理账号 (shop-account)
资产管理 (/asset-management)
- IoT卡管理 (iot-card-management)
- IoT卡任务 (iot-card-task)
- 设备任务 (device-task)
- 设备管理 (devices)
- 授权记录 (authorization-records)
账户管理 (/account)
- 企业客户 (enterprise-customer)
- 运营商管理 (carrier-management)
- 订单管理 (orders)
- 佣金管理 (commission/*)

Implementation Pattern

基于 /system/role 页面的实现，统一使用以下模式：

<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

提升安全性: UI层面防止无权限操作
改善UX: 用户只看到有权限的功能
统一体验: 所有页面使用相同的权限控制模式

Risks

向后兼容性: 现有页面需要更新，可能影响用户使用习惯
测试覆盖: 需要测试各种权限组合的显示效果

Mitigations

分模块逐步rollout，优先完成核心模块
权限配置由后端控制，前端只负责显示/隐藏
保持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

5.0 KiB Raw Blame History Unescape Escape