🔑 useAuthButtons 按钮权限 Hook 使用指南

🎯 功能简介

useAuthButtons 是一个用于处理页面按钮权限控制的 Hook，它可以根据当前路由和用户权限自动判断各个按钮是否应该显示，是实现页面级别精细化权限控制的核心组件。

🚀 核心特性

• 🔍 自动识别当前路由页面
• 🔐 基于权限动态控制按钮显示
• 🔄 响应式更新，权限变更时自动响应
• 🧩 与 Vue 模板无缝集成，使用简单直观

📝 使用方法

基本用法

import { useAuthButtons } from '@pt/common-ui';

// 在组件中使用
const { authorizedButtons } = useAuthButtons();

// 在模板中使用
// <a-button v-if="authorizedButtons.add">新增</a-button>
// 或 
// <a-button v-if="authorizedButtons['add']">新增</a-button>

📚 完整示例

<template>
  <div class="page-container">
    <div class="operation-bar">
      <!-- 根据权限显示或隐藏按钮 -->
      <a-button type="primary" v-if="authorizedButtons.add">
        <plus-outlined />新增用户
      </a-button>
      
      <a-button type="primary" v-if="authorizedButtons.import">
        <upload-outlined />导入数据
      </a-button>
      
      <a-button v-if="authorizedButtons.export">
        <download-outlined />导出数据
      </a-button>
      
      <a-button danger v-if="authorizedButtons.batchDelete">
        <delete-outlined />批量删除
      </a-button>
    </div>
    
    <a-table :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a v-if="authorizedButtons.edit">编辑</a>
            <a-popconfirm
              v-if="authorizedButtons.delete"
              title="确定删除此记录吗?"
              @confirm="handleDelete(record)"
            >
              <a class="text-danger">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { useAuthButtons } from '@pt/common-ui';
import { PlusOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons-vue';

// 获取当前页面的按钮权限
const { authorizedButtons } = useAuthButtons();

// 表格数据与列定义省略...

// 删除操作
const handleDelete = (record) => {
  console.log('删除记录:', record);
  // 删除逻辑
};
</script>

⚙️ 工作原理

1. 通过 useRoute 获取当前页面的路由信息
2. 从 AuthStore 中获取当前路由对应的权限按钮列表
3. 将数组形式的按钮权限转换为对象形式，便于在模板中使用 v-if 进行条件渲染
4. 返回响应式的 authorizedButtons 对象，当权限发生变化时自动更新

// 源码实现
export const useAuthButtons = () => {
  const route = useRoute();
  const authStore = AuthStore();
  const authButtons = authStore.authButtonListGet[route.name as string] || [];

  // 当前页按钮权限列表
  const authorizedButtons = computed(() => {
    let currentPageAuthButton: { [key: string]: boolean } = {};
    authButtons.forEach((item) => (currentPageAuthButton[item] = true));
    return currentPageAuthButton;
  });

  return {
    authorizedButtons,
  };
};

⚠️ 注意事项

1. 确保路由配置中的 name 属性正确设置，Hook 依赖路由名称获取权限
2. 需要 AuthStore 中存储了正确的按钮权限数据
3. 按钮权限的 key 应与后端接口返回的权限标识保持一致
4. 此 Hook 只处理按钮的显示权限，不处理接口调用权限

💡 最佳实践

1. 为所有操作按钮统一设置权限标识，推荐使用 模块-操作 的命名方式

   user-add, user-edit, user-delete, user-export

2. 在路由配置中为每个页面设置唯一的 name 属性

   {
     path: '/user',
     name: 'user-manage',
     component: () => import('@/views/user/index.vue')
   }

3. 与 v-auth 指令结合使用，实现全面的权限控制

   <!-- 元素级权限控制 -->
   <button v-auth="'user-add'">添加用户</button>
   
   <!-- 页面按钮权限控制 -->
   <button v-if="authorizedButtons.add">添加用户</button>

4. 在复杂组件中使用权限检查函数

   const hasPermission = (permission: string) => {
     return !!authorizedButtons.value[permission];
   };
   
   // 在条件判断中使用
   if (hasPermission('user-edit')) {
     // 执行编辑相关逻辑
   }

🔗 相关资源

• v-auth 权限指令