当前位置：首页 > VUE

vue如何实现菜单权限

2026-01-21 16:54:58VUE

Vue 实现菜单权限的方法

动态路由配置

通过后端返回的用户权限数据动态生成路由配置，使用 router.addRoutes 方法添加权限路由。在路由守卫中校验用户权限，未授权路由可重定向到登录页或 403 页面。

// 示例：动态添加路由
const dynamicRoutes = [
  { path: '/admin', component: Admin, meta: { roles: ['admin'] } }
]
router.addRoutes(dynamicRoutes)

权限指令控制

自定义 v-permission 指令，用于控制页面元素的显隐。指令内部比对用户权限与元素要求的权限，不匹配时移除 DOM 节点。

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles
    if (!roles.some(role => value.includes(role))) {
      el.parentNode.removeChild(el)
    }
  }
})

菜单数据过滤

从后端获取完整的菜单树结构，根据用户角色在前端进行过滤。使用递归算法处理嵌套菜单，保留符合权限的菜单项。

function filterMenus(menus, roles) {
  return menus.filter(menu => {
    if (menu.meta?.roles) {
      return roles.some(role => menu.meta.roles.includes(role))
    }
    if (menu.children) {
      menu.children = filterMenus(menu.children, roles)
      return menu.children.length > 0
    }
    return true
  })
}

状态管理集成

将权限信息存储在 Vuex 或 Pinia 中，通过 getters 提供权限校验方法。组件中通过 mapGetters 获取权限状态，控制界面元素的渲染逻辑。

// Vuex 示例
const store = new Vuex.Store({
  state: {
    roles: ['user']
  },
  getters: {
    hasPermission: state => requiredRoles => {
      return state.roles.some(role => requiredRoles.includes(role))
    }
  }
})

按钮级权限控制

对于按钮级别的细粒度控制，可采用权限码方式。每个按钮绑定唯一权限码，通过 mixin 或组合式 API 提供校验方法。

vue如何实现菜单权限

<template>
  <button v-if="hasAuth('create')">创建</button>
</template>

<script>
export default {
  methods: {
    hasAuth(code) {
      return this.$store.getters.permissions.includes(code)
    }
  }
}
</script>