Vue3 + Element Plus 实战：如何为你的el-menu左侧导航添加路由守卫和权限控制？-平芜编程栈

Vue3 + Element Plus 企业级权限菜单实战：从路由守卫到动态渲染

在开发中大型后台管理系统时，权限控制往往是核心痛点之一。最近接手了一个多租户的SaaS项目，不同角色的用户需要看到完全不同的功能菜单。比如管理员能看到所有数据统计和用户管理模块，而普通编辑只能访问内容管理相关功能。这种需求在金融、医疗等行业尤为常见，如果处理不好，轻则用户体验割裂，重则引发数据安全问题。

1. 权限系统设计基础

1.1 角色与权限的建模

在开始编码前，我们需要先明确权限系统的数据结构。通常有两种主流方案：

RBAC（基于角色的访问控制）：用户关联角色，角色关联权限
ABAC（基于属性的访问控制）：通过用户属性动态计算权限

对于大多数后台系统，RBAC已经足够。我们可以设计如下数据结构：

// 用户类型定义 interface User { id: number name: string roles: string[] // 如 ['admin', 'editor'] } // 路由权限配置 interface RouteMeta { title: string icon?: string requiresAuth?: boolean roles?: string[] // 允许访问的角色 }

1.2 路由配置的最佳实践

在Vue Router中，我们需要将权限信息注入路由配置。推荐使用meta字段存储权限数据：

const routes = [ { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { title: '控制台', icon: 'el-icon-data-line', roles: ['admin', 'editor'] } }, { path: '/user-management', component: () => import('@/views/UserManagement.vue'), meta: { title: '用户管理', icon: 'el-icon-user', roles: ['admin'] // 仅管理员可见 } } ]

2. 实现路由守卫权限控制

2.1 全局前置守卫逻辑

路由守卫是权限系统的第一道防线。在router/index.ts中添加全局守卫：

router.beforeEach((to, from, next) => { const userStore = useUserStore() // 不需要认证的路由直接放行 if (!to.meta.requiresAuth) return next() // 用户未登录时重定向到登录页 if (!userStore.isAuthenticated) { return next({ path: '/login', query: { redirect: to.fullPath } }) } // 检查路由权限 if (to.meta.roles) { const hasPermission = userStore.roles.some(role => to.meta.roles.includes(role) ) if (!hasPermission) { // 无权限时跳转到403页面 return next('/403') } } next() })

2.2 动态路由加载策略

对于大型系统，推荐使用路由懒加载结合权限过滤：

// 获取用户权限后动态添加路由 const initDynamicRoutes = async () => { const { roles } = await getUserInfo() // 过滤出有权限的路由 const allowedRoutes = asyncRoutes.filter(route => { return !route.meta?.roles || route.meta.roles.some(r => roles.includes(r)) }) allowedRoutes.forEach(route => router.addRoute(route)) // 确保404页面在最后 router.addRoute({ path: '/:pathMatch(.*)', redirect: '/404' }) }

3. 动态菜单渲染方案

3.1 基于权限过滤菜单项

在Pinia/Vuex中存储过滤后的菜单数据：

// stores/menu.ts export const useMenuStore = defineStore('menu', { state: () => ({ menus: [] as RouteRecordNormalized[] }), actions: { async generateMenus() { const router = useRouter() const userStore = useUserStore() this.menus = router.getRoutes() .filter(route => { return route.meta?.title && (!route.meta.roles || route.meta.roles.some(r => userStore.roles.includes(r))) }) .sort((a, b) => (a.meta.order || 0) - (b.meta.order || 0)) } } })

3.2 递归渲染多级菜单

在组件中使用递归方式渲染无限级菜单：

<template> <el-menu :default-active="$route.path" router @select="handleSelect" > <template v-for="route in menuStore.menus"> <el-submenu v-if="route.children?.length" :key="route.path" :index="route.path" > <template #title> <i :class="route.meta.icon"></i> <span>{{ route.meta.title }}</span> </template> <menu-item :routes="route.children" /> </el-submenu> <el-menu-item v-else :key="route.path" :index="route.path" > <i :class="route.meta.icon"></i> <span>{{ route.meta.title }}</span> </el-menu-item> </template> </el-menu> </template> <script setup> import MenuItem from './MenuItem.vue' const menuStore = useMenuStore() const handleSelect = (key) => { // 可以在这里添加菜单点击的埋点逻辑 } </script>

4. 高级优化与问题解决

4.1 菜单状态持久化方案

用户刷新页面时，需要保持菜单的展开状态：

// 使用sessionStorage保存展开的菜单 const saveOpenedMenus = (openedMenus: string[]) => { sessionStorage.setItem('openedMenus', JSON.stringify(openedMenus)) } // 恢复状态 const restoreMenuState = () => { const opened = JSON.parse(sessionStorage.getItem('openedMenus') || '[]') opened.forEach(path => { // 手动打开对应的submenu }) }

4.2 性能优化技巧

对于大型菜单系统，可以采用虚拟滚动优化：

<template> <el-menu> <virtual-list :size="48" :remain="8" :data="menuStore.menus" > <template #default="{ item }"> <!-- 菜单项渲染 --> </template> </virtual-list> </el-menu> </template>

4.3 常见问题排查

菜单高亮失效问题：

确保default-active绑定的是完整路径
检查路由配置中的path是否与菜单项的index匹配
对于动态参数路由，使用active-menu属性手动指定

图标不显示问题：

确认已正确引入Element Plus图标组件
检查图标名称是否与官方文档一致
考虑使用自定义SVG图标提升灵活性

5. 实战案例：多租户SaaS系统

最近在电商后台项目中，我们实现了这样的权限菜单系统：

数据准备阶段：

// 路由配置示例 { path: '/orders', component: () => import('@/views/Orders.vue'), meta: { title: '订单管理', icon: 'el-icon-s-order', roles: ['admin', 'finance'], tenantVisible: ['ecommerce', 'retail'] // 特定租户可见 } }

多维度权限过滤：

// 扩展权限检查逻辑 const isMenuVisible = (route) => { const { roles, tenant } = useUserStore() return ( (!route.meta.roles || roles.some(r => route.meta.roles.includes(r))) && (!route.meta.tenantVisible || route.meta.tenantVisible.includes(tenant.type)) ) }