菜单权限控制

自定义权限 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;

四、权限 Hook 的优化策略

4.1 性能优化

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

4.2 动态更新支持

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

五、总结与展望

5.1 本节内容回顾

在本节课中，我们深入探讨了自定义权限Hook的实现方法，涵盖了以下内容：

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

5.2 下一步学习建议

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

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

六、课后练习

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

希望本节课能帮助你全面掌握自定义权限Hook的实现方法！老曹期待在下一节课中与大家探讨更高级的权限管理技巧。

posted @ 2026-01-20 22:35 gccbuaa 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

gccbuaa