Vue 3基于Composition API如何实现组件权限控制

在Vue 3项目开发中，多角色权限控制是非常常见的需求，尤其是后台管理系统，不同角色的用户能看到的功能模块、操作按钮都存在差异。本文将介绍基于Composition API实现的组件权限控制方案，实现权限逻辑和组件解耦，提升代码复用性。

方案核心思路

整个方案主要分为三个部分，首先定义全局的权限标识和当前用户的权限列表，然后封装通用的权限校验组合式函数，最后在组件内调用该函数控制组件的显示或者操作权限。

前置准备：权限定义与用户权限存储

我们先在项目中定义所有需要控制的权限标识，通常是后端返回的权限码，这里我们模拟一个权限列表：

// src/constants/permission.js
// 定义所有权限标识，实际项目中可由后端返回或者前端统一维护
export const PERMISSIONS = {
  USER_VIEW: 'user:view', // 查看用户列表
  USER_ADD: 'user:add',   // 新增用户
  USER_EDIT: 'user:edit', // 编辑用户
  USER_DELETE: 'user:delete', // 删除用户
  ROLE_VIEW: 'role:view'  // 查看角色列表
}

// 模拟当前登录用户的权限列表，实际项目中从接口获取后存入状态管理或者本地存储
export const currentUserPermissions = ['user:view', 'user:add', 'role:view']

封装权限校验组合式函数

利用Composition API的特性，我们把权限校验逻辑封装到一个独立的组合式函数中，后续所有需要权限控制的组件都可以直接复用这个函数。

// src/composables/usePermission.js
import { PERMISSIONS, currentUserPermissions } from '@/constants/permission'

/**
 * 权限校验组合式函数
 * @returns {Object} 包含权限校验相关的方法
 */
export function usePermission() {
  /**
   * 校验单个权限
   * @param {string} permission 权限标识
   * @returns {boolean} 是否拥有该权限
   */
  const hasPermission = (permission) => {
    return currentUserPermissions.includes(permission)
  }

  /**
   * 校验多个权限，满足任意一个即可
   * @param {string[]} permissions 权限标识数组
   * @returns {boolean} 是否拥有任意一个权限
   */
  const hasAnyPermission = (permissions) => {
    return permissions.some(item => currentUserPermissions.includes(item))
  }

  /**
   * 校验多个权限，需要全部满足
   * @param {string[]} permissions 权限标识数组
   * @returns {boolean} 是否拥有所有权限
   */
  const hasAllPermission = (permissions) => {
    return permissions.every(item => currentUserPermissions.includes(item))
  }

  return {
    hasPermission,
    hasAnyPermission,
    hasAllPermission,
    PERMISSIONS
  }
}

组件内使用权限控制

在组件中引入封装好的usePermission函数，就可以轻松实现权限控制，下面分别展示控制组件显示、控制按钮操作两种常见场景。

场景1：控制组件显示隐藏

对于无权限查看的模块，直接不渲染对应的组件：

<template>
  <div class="user-page">
    <h2>用户管理页面</h2>
    <!-- 只有拥有user:view权限的用户才能看到用户列表 -->
    <user-list v-if="hasPermission(PERMISSIONS.USER_VIEW)" />
    <!-- 只有拥有user:add权限的用户才能看到新增按钮 -->
    <button v-if="hasPermission(PERMISSIONS.USER_ADD)">新增用户</button>
    <!-- 同时拥有user:edit和user:delete权限才显示批量操作区域 -->
    <div v-if="hasAllPermission([PERMISSIONS.USER_EDIT, PERMISSIONS.USER_DELETE])">
      批量操作区域
    </div>
  </div>
</template>

<script setup>
import { usePermission } from '@/composables/usePermission'
import UserList from './UserList.vue'
import { PERMISSIONS } from '@/constants/permission'

const { hasPermission, hasAllPermission } = usePermission()
</script>

场景2：控制操作权限

有些场景下组件需要显示，但是部分操作需要权限控制，比如表格中的操作列按钮：

<template>
  <div class="role-page">
    <h2>角色管理页面</h2>
    <table>
      <thead>
        <tr>
          <th>角色名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="role in roleList" :key="role.id">
          <td>{{ role.name }}</td>
          <td>
            <button 
              @click="handleEdit(role)" 
              :disabled="!hasPermission(PERMISSIONS.USER_EDIT)"
            >
              编辑
            </button>
            <button 
              @click="handleDelete(role)" 
              :disabled="!hasPermission(PERMISSIONS.USER_DELETE)"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { usePermission } from '@/composables/usePermission'
import { PERMISSIONS } from '@/constants/permission'

const { hasPermission } = usePermission()
const roleList = ref([
  { id: 1, name: '管理员' },
  { id: 2, name: '普通用户' }
])

const handleEdit = (role) => {
  console.log('编辑角色', role)
}

const handleDelete = (role) => {
  console.log('删除角色', role)
}
</script>

方案扩展与优化

如果项目使用了Pinia或者Vuex做状态管理，可以把当前用户的权限列表存入全局状态，在权限更新时同步修改，避免每次刷新都重新获取。另外也可以封装一个权限指令，比如v-permission，进一步简化组件内的权限控制逻辑，不过基于组合式函数的方案已经足够灵活，适配大多数场景。

这种基于Composition API的权限控制方案，把权限逻辑完全抽离出来，和组件本身的逻辑解耦，后续如果需要调整权限校验逻辑，只需要修改组合式函数即可，所有使用该函数的组件都会同步生效，大大降低了维护成本。

Vue_3Composition_API组件权限控制前端权限管理修改时间：2026-06-02 04:43:47