在 Vue 项目中实现权限管理，尤其是控制到按钮级别的权限控制，通常包括以下几个方面：

一、权限管理的层级划分

二、实现方案详解

1. 权限数据结构设计（示例）

// 用户权限列表（一般从接口获取）
const permissions = [
  'user.create',
  'user.edit',
  'user.delete',
  'role.view'
]

2. 自定义权限指令（控制按钮/元素可见性）

创建自定义指令：v-has-permission

// main.js 或单独文件引入
app.directive('hasPermission', {
  mounted(el, binding) {
    const { value } = binding
    const userPermissions = ['user.create', 'user.edit'] // 示例：从 store 获取

    if (value && !userPermissions.includes(value)) {
      el.parentNode.removeChild(el) // 移除 DOM 元素
    }
  }
})

//使用方式
<template>
  <button v-hasPermission="'user.create'">新增用户</button>
</template>

3. 权限函数封装（用于组件内判断）

如果你希望保留按钮但禁用交互（如置灰），可以使用一个工具函数来判断权限。

封装权限检查函数：

// utils/permission.js
export function hasPermission(requiredPerm) {
  const userPerms = ['user.create', 'user.edit'] // 替换为从 store 获取
  return userPerms.includes(requiredPerm)
}
//vue
<template>
  <button :disabled="!hasPermission('user.delete')">删除用户</button>
</template>

<script setup>
import { hasPermission } from '@/utils/permission'
</script>

4. 路由权限控制（页面级）
5. 示例：动态添加路由或跳转登录页

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth
  const isAuthenticated = checkAuth() // 你的认证逻辑

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
//并在路由配置中标注权限：
{
  path: '/users',
  name: 'UserList',
  component: () => import('@/views/UserList.vue'),
  meta: { requiresAuth: true, permission: 'user.view' }
}

三、权限管理的工作流程细节

四、推荐结构目录

src/
├── directives/
│   └── hasPermission.js
├── utils/
│   └── permission.js
├── store/
│   └── modules/
│       └── user.js (保存用户权限)
├── views/
│   └── somePage.vue (使用权限判断)
└── router/
    └── index.js (配置 meta.permission)

五、总结

如果你能结合 Pinia/Vuex + 路由守卫 + 自定义指令 + 后端接口权限校验，就可以实现一个完整的权限管理系统。