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

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，测试其效果。