当前位置：首页 > VUE

vue实现菜单权限配置

2026-02-23 06:03:10VUE

实现思路

Vue中实现菜单权限配置通常涉及前端路由动态生成和权限验证。核心流程包括用户角色/权限获取、路由过滤、菜单渲染三部分。

权限数据结构设计

权限数据通常由后端返回，建议采用扁平化结构：

vue实现菜单权限配置

{
  "roles": ["admin", "editor"],
  "permissions": ["user:add", "menu:edit"]
}

路由配置方案

在路由定义中添加meta字段标识权限：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permissions: ['admin'] }
  },
  {
    path: '/user-manage',
    component: UserManage,
    meta: { requiresAuth: true, permissions: ['user:add'] }
  }
]

权限过滤方法

通过路由守卫实现权限验证：

vue实现菜单权限配置

router.beforeEach((to, from, next) => {
  const hasPermission = to.meta.permissions 
    ? userPermissions.some(perm => to.meta.permissions.includes(perm))
    : true

  if (to.meta.requiresAuth && !hasPermission) {
    next('/403')
  } else {
    next()
  }
})

动态菜单生成

根据权限过滤可访问路由并生成菜单：

function generateMenu(routes, permissions) {
  return routes.filter(route => {
    if (!route.meta?.permissions) return true
    return route.meta.permissions.some(perm => 
      permissions.includes(perm)
    )
  }).map(route => ({
    path: route.path,
    title: route.meta?.title,
    icon: route.meta?.icon
  }))
}

组件实现示例

使用递归组件渲染多级菜单：

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

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: { MenuItem },
  computed: {
    filteredMenu() {
      return generateMenu(this.$router.options.routes, this.$store.state.user.permissions)
    }
  }
}
</script>