【前端权限】自定义权限 Hook / Composition API实现按钮级 /字段级 /菜单权限控制

原创于 2025-12-12 13:00:00 发布 · 1.3k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #按钮级权限 #字段级权限 #菜单权限 #Hook #Composition API

前端业务实践专栏收录该内容

81 篇文章

订阅专栏

🌲 自定义权限 Hook / Composition API实现按钮级 /字段级 /菜单权限控制

🌟 引言

在现代前端开发中，Hook和Composition API为开发者提供了更灵活、更模块化的方式来处理复杂逻辑。老曹在实际项目中发现，通过封装自定义权限Hook（如usePermission或useAccess），可以显著提升代码的复用性和可维护性。本节课将围绕Vue 3的Composition API和React的Custom Hook展开，深入探讨如何封装权限判断函数，实现高效、优雅的权限控制。

💡 老曹提示
自定义权限Hook不仅能简化权限判断逻辑，还能让组件代码更加清晰。例如，在一个复杂的表单页面中，通过usePermission可以轻松控制每个字段的可见性，而无需在模板中嵌套大量条件判断。

🎯 学习目标

理解自定义权限Hook的核心概念及其应用场景。
掌握使用Vue 3的Composition API封装权限逻辑。
学会通过React的Custom Hook实现权限判断。
熟悉权限Hook的设计思路与优化策略。
能够独立完成权限Hook的开发与调试。

📚 一、自定义权限 Hook 的概述

🔹 1.1 自定义权限 Hook 的定义与优势

自定义权限Hook是一种封装权限逻辑的工具，其核心目标是：

逻辑复用：将权限判断逻辑集中到一个函数中，避免重复代码。
代码简洁：减少组件中的冗余逻辑，使代码更易读。
灵活性高：支持动态更新权限状态，适应复杂场景需求。

🔹 1.2 应用场景分析

自定义权限Hook广泛应用于以下场景：

按钮级权限控制：判断用户是否具备操作某按钮的权限。
字段级权限控制：动态显示或隐藏表单字段。
菜单权限控制：根据用户角色动态生成菜单。

🛠️ 二、Vue 3 中的自定义权限 Hook

🔹 2.1 使用 Composition API 封装 `usePermission`

🔸 2.1.1 设计思路

usePermission的核心功能是判断当前用户是否具备指定权限。以下是设计步骤：

获取权限状态：从全局状态管理工具（如Pinia）中读取用户权限列表。
封装权限判断逻辑：提供一个函数，接收权限标识并返回布尔值。
支持动态更新：监听权限状态的变化，确保实时同步。

🔸 2.1.2 示例代码解析

// hooks/usePermission.js
import { computed } from 'vue';
import { usePermissionStore } from '@/stores/permission';

export function usePermission() {
  const permissionStore = usePermissionStore();

  // 封装权限判断函数
  const hasPermission = (permission) => {
    return permissionStore.permissions.includes(permission);
  };

  // 支持多权限判断
  const hasAnyPermission = (permissions) => {
    return permissions.some((perm) => permissionStore.permissions.includes(perm));
  };

  return { hasPermission, hasAnyPermission };
}

🔸 2.1.3 在组件中使用

<template>
  <div>
    <button v-if="hasPermission('edit')">编辑</button>
    <button v-if="hasAnyPermission(['delete', 'admin'])">删除</button>
  </div>
</template>

<script>
import { usePermission } from '@/hooks/usePermission';

export default {
  setup() {
    const { hasPermission, hasAnyPermission } = usePermission();

    return { hasPermission, hasAnyPermission };
  },
};
</script>

🔹 2.2 封装 `useAccess` 实现更高级的权限控制

useAccess可以进一步扩展，支持基于角色或其他条件的权限判断。

🔸 2.2.1 示例代码解析

// hooks/useAccess.js
import { computed } from 'vue';
import { usePermissionStore } from '@/stores/permission';

export function useAccess() {
  const permissionStore = usePermissionStore();

  // 判断是否为管理员
  const isAdmin = computed(() => permissionStore.roles.includes('admin'));

  // 判断是否具有特定权限
  const canAccess = (condition) => {
    if (typeof condition === 'string') {
      return permissionStore.permissions.includes(condition);
    }
    if (Array.isArray(condition)) {
      return condition.some((perm) => permissionStore.permissions.includes(perm));
    }
    return false;
  };

  return { isAdmin, canAccess };
}

🔸 2.2.2 在组件中使用

<template>
  <div>
    <p v-if="isAdmin">欢迎管理员！</p>
    <button v-if="canAccess('edit')">编辑</button>
  </div>
</template>

<script>
import { useAccess } from '@/hooks/useAccess';

export default {
  setup() {
    const { isAdmin, canAccess } = useAccess();

    return { isAdmin, canAccess };
  },
};
</script>

🛠️ 三、React 中的自定义权限 Hook

🔹 3.1 使用 Custom Hook 封装 `usePermission`

🔸 3.1.1 设计思路

React中的usePermission与Vue类似，但需要借助useSelector从Redux中读取权限状态。

🔸 3.1.2 示例代码解析

// hooks/usePermission.js
import { useSelector } from 'react-redux';

export function usePermission() {
  const permissions = useSelector((state) => state.permission.permissions);

  // 封装权限判断函数
  const hasPermission = (permission) => {
    return permissions.includes(permission);
  };

  // 支持多权限判断
  const hasAnyPermission = (permissionsList) => {
    return permissionsList.some((perm) => permissions.includes(perm));
  };

  return { hasPermission, hasAnyPermission };
}

🔸 3.1.3 在组件中使用

import React from 'react';
import { usePermission } from './hooks/usePermission';

const UserProfile = () => {
  const { hasPermission, hasAnyPermission } = usePermission();

  return (
    <div>
      <button disabled={!hasPermission('edit')}>编辑</button>
      <button disabled={!hasAnyPermission(['delete', 'admin'])}>删除</button>
    </div>
  );
};

export default UserProfile;

🔹 3.2 封装 `useAccess` 实现更高级的权限控制

🔸 3.2.1 示例代码解析

// hooks/useAccess.js
import { useSelector } from 'react-redux';

export function useAccess() {
  const roles = useSelector((state) => state.permission.roles);
  const permissions = useSelector((state) => state.permission.permissions);

  // 判断是否为管理员
  const isAdmin = roles.includes('admin');

  // 判断是否具有特定权限
  const canAccess = (condition) => {
    if (typeof condition === 'string') {
      return permissions.includes(condition);
    }
    if (Array.isArray(condition)) {
      return condition.some((perm) => permissions.includes(perm));
    }
    return false;
  };

  return { isAdmin, canAccess };
}

🔸 3.2.2 在组件中使用

import React from 'react';
import { useAccess } from './hooks/useAccess';

const UserProfile = () => {
  const { isAdmin, canAccess } = useAccess();

  return (
    <div>
      {isAdmin && <p>欢迎管理员！</p>}
      <button disabled={!canAccess('edit')}>编辑</button>
    </div>
  );
};

export default UserProfile;