基于 Composition API 和 Custom Hook 实现前端权限控制

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

引言

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

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

核心目标

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

一、自定义权限 Hook 的概述

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

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

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

1.2 应用场景分析

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

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

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

2.1 使用 Composition API 封装 usePermission

2.1.1 设计思路

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

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

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;

四、权限 Hook 的优化策略

4.1 性能优化

为了避免频繁计算权限状态，可以使用 computed（Vue）或 useMemo（React）缓存结果。

4.2 动态更新支持

通过监听权限状态的变化，确保 Hook 能够实时响应权限更新。

五、总结与实践建议

5.1 内容回顾

本文深入探讨了自定义权限 Hook 的实现方法，涵盖了以下内容：

1. 自定义权限 Hook 的核心概念与优势。
2. 使用 Vue 3 的 Composition API 封装 usePermission 和 useAccess。
3. 使用 React 的 Custom Hook 实现权限判断。
4. 权限 Hook 的设计思路与优化策略。

5.2 实践建议

掌握了自定义权限 Hook 后，建议继续学习以下内容：

• 动态权限更新：支持实时更新权限状态。
• 多 Tab 状态同步：解决多浏览器标签页间的权限状态同步问题。
• 权限状态的安全性：防止客户端篡改权限数据。

5.3 练习任务

1. 在你的 Vue 3 项目中实现一个基于 Composition API 的 usePermission。
2. 尝试使用 React 的 Custom Hook 封装 useAccess。
3. 在实际项目中应用自定义权限 Hook，测试其效果。