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

// 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;