JavaScript大前端
基于 Composition API 和 Custom Hook 实现前端权限控制
基于 Vue 3 Composition API 和 React Custom Hook 的前端权限控制方案。通过封装 usePermission 和 useAccess 钩子，实现了按钮、字段及菜单级别的权限管理。示例展示了如何从 Pinia 或 Redux 获取权限状态，并结合 computed 或 useMemo 进行性能优化，确保代码复用性与可维护性。
基于 Vue 3 Composition API 和 React Custom Hook 的前端权限控制方案。通过封装 usePermission 和 useAccess 钩子，实现了按钮、字段及菜单级别的权限管理。示例展示了如何从 Pinia 或 Redux 获取权限状态，并结合 computed 或 useMemo 进行性能优化，确保代码复用性与可维护性。
在现代前端开发中，Hook 和 Composition API 为开发者提供了更灵活、更模块化的方式来处理复杂逻辑。通过封装自定义权限 Hook（如 usePermission 或 useAccess），可以显著提升代码的复用性和可维护性。本文将围绕 Vue 3 的 Composition API 和 React 的 Custom Hook 展开，深入探讨如何封装权限判断函数，实现高效、优雅的权限控制。
💡 提示 自定义权限 Hook 不仅能简化权限判断逻辑，还能让组件代码更加清晰。例如，在一个复杂的表单页面中，通过 usePermission 可以轻松控制每个字段的可见性，而无需在模板中嵌套大量条件判断。
自定义权限 Hook 是一种封装权限逻辑的工具，其核心目标是：
自定义权限 Hook 广泛应用于以下场景：
usePermission 的核心功能是判断当前用户是否具备指定权限。以下是设计步骤：
// 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 };
}
<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>
useAccess 可以进一步扩展，支持基于角色或其他条件的权限判断。
// 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 };
}
<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 中的 usePermission 与 Vue 类似，但需要借助 useSelector 从 Redux 中读取权限状态。
// 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 };
}
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;
// 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 };
}
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;
为了避免频繁计算权限状态，可以使用 computed（Vue）或 useMemo（React）缓存结果。
通过监听权限状态的变化，确保 Hook 能够实时响应权限更新。
本文深入探讨了自定义权限 Hook 的实现方法，涵盖了以下内容：
掌握了自定义权限 Hook 后，建议继续学习以下内容：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online