vue前端实现菜单权限

实现菜单权限的基本思路

在Vue前端实现菜单权限通常需要结合后端提供的权限数据，动态渲染用户可访问的菜单项。核心思路是通过用户角色或权限标识过滤菜单配置，仅展示有权限的菜单。

权限数据结构设计

后端返回的权限数据通常包含用户可访问的路由名称或标识。常见格式如下：

{
  "permissions": ["dashboard", "user_manage", "order_list"]
}

前端菜单配置建议使用树形结构，每个菜单项包含权限标识：

const menuItems = [
  {
    name: 'Dashboard',
    path: '/dashboard',
    meta: { permission: 'dashboard' }
  },
  {
    name: 'User Management',
    path: '/users',
    meta: { permission: 'user_manage' },
    children: [...]
  }
]

动态过滤菜单

通过递归过滤菜单项，保留用户有权限访问的节点：

function filterMenus(menus, permissions) {
  return menus.filter(menu => {
    if (menu.children) {
      menu.children = filterMenus(menu.children, permissions)
    }
    return !menu.meta?.permission || permissions.includes(menu.meta.permission)
  })
}

路由守卫控制访问

在全局路由守卫中添加权限验证：

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta?.permission
  if (requiredPermission && !userPermissions.includes(requiredPermission)) {
    next('/forbidden')
  } else {
    next()
  }
})

与状态管理结合

在Vuex或Pinia中集中管理权限状态：

// Pinia示例
export const useAuthStore = defineStore('auth', {
  state: () => ({
    permissions: []
  }),
  actions: {
    async fetchPermissions() {
      this.permissions = await api.getUserPermissions()
    }
  }
})

菜单组件实现

创建动态菜单组件，根据过滤后的菜单数据渲染导航：

<template>
  <el-menu>
    <template v-for="item in filteredMenus">
      <menu-item :key="item.path" :item="item" />
    </template>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const props = defineProps(['menuData'])

const filteredMenus = computed(() => {
  return filterMenus(props.menuData, authStore.permissions)
})
</script>

按钮级权限控制

对于页面内的操作按钮，可以使用指令方式控制显示：

app.directive('permission', {
  mounted(el, binding) {
    const { value } = binding
    const authStore = useAuthStore()
    if (!authStore.permissions.includes(value)) {
      el.parentNode?.removeChild(el)
    }
  }
})

缓存优化策略

为避免频繁计算，可将过滤后的菜单缓存起来：

const cachedMenus = computed(() => {
  return filterMenus(menuData, authStore.permissions)
})

错误处理与降级方案

当权限接口异常时，可提供默认菜单或提示：

try {
  await authStore.fetchPermissions()
} catch (error) {
  showMessage('权限加载失败，显示基础菜单')
  authStore.permissions = ['dashboard'] // 默认权限
}