vue菜单权限怎么实现

实现Vue菜单权限的基本思路

在Vue中实现菜单权限控制通常需要结合后端接口和前端路由管理。核心思路是根据用户角色或权限动态生成可访问的菜单，同时配合路由守卫进行访问控制。

基于路由配置的权限控制

定义路由时添加权限标识字段，例如meta.roles，标识该路由允许访问的角色：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { roles: ['admin'] }
  },
  {
    path: '/user',
    component: User,
    meta: { roles: ['admin', 'user'] }
  }
]

获取用户权限信息

登录成功后从后端获取用户权限数据，通常包括角色或权限点列表。将权限信息存储在Vuex或Pinia中：

// 假设获取到的用户角色是['user']
store.commit('setUserRoles', ['user'])

过滤可访问路由

根据用户权限过滤出有权限访问的路由，可以使用router.addRoutes动态添加路由（Vue Router 3.x）或router.addRoute（Vue Router 4.x）：

const accessibleRoutes = originalRoutes.filter(route => {
  return !route.meta?.roles || route.meta.roles.some(role => userRoles.includes(role))
})

// Vue Router 3.x
router.addRoutes(accessibleRoutes)

// Vue Router 4.x
accessibleRoutes.forEach(route => router.addRoute(route))

动态生成菜单

基于过滤后的路由生成菜单组件，可以使用递归组件处理嵌套路由：

<template>
  <div v-for="route in accessibleRoutes" :key="route.path">
    <router-link v-if="route.meta?.showInMenu" :to="route.path">
      {{ route.meta?.title || route.name }}
    </router-link>
    <Menu v-if="route.children" :routes="route.children" />
  </div>
</template>

路由守卫控制访问

添加全局前置守卫，在路由跳转时检查权限：

router.beforeEach((to, from, next) => {
  const { roles } = store.state.user
  if (to.meta?.roles && !to.meta.roles.some(role => roles.includes(role))) {
    next('/forbidden') // 无权限跳转到403页面
  } else {
    next()
  }
})

基于权限点的精细控制

对于更细粒度的控制，可以使用权限点（permission codes）代替角色：

// 路由配置
{
  path: '/report',
  component: Report,
  meta: { permissions: ['report_view'] }
}

// 权限检查
const hasPermission = (permissions) => {
  return permissions.every(p => userPermissions.includes(p))
}

服务端返回菜单结构

另一种常见做法是由后端直接返回用户可访问的完整菜单结构，前端只需渲染这个结构：

// 获取菜单API响应示例
{
  "menus": [
    {
      "path": "/dashboard",
      "name": "Dashboard",
      "children": [...]
    }
  ]
}

// 前端处理后动态添加路由
api.getMenus().then(menus => {
  const routes = transformMenuToRoutes(menus)
  routes.forEach(route => router.addRoute(route))
})

按钮级权限控制

对于页面内的按钮权限，可以封装权限指令或组件：

<template>
  <button v-permission="'user_create'">创建用户</button>
  <Permission :code="'user_delete'">
    <button>删除用户</button>
  </Permission>
</template>

缓存和更新策略

权限变更时需要清除路由缓存并重新加载：

function resetPermission() {
  // 重置路由
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
  // 重新加载权限路由
  loadAccessibleRoutes()
}

以上方法可以根据项目实际需求组合使用，实现从菜单到按钮的多层级权限控制。