Vue路由权限如何动态添加路由？

在Vue应用中，路由权限控制是保障系统安全的关键环节，而动态添加路由则是实现精细化权限控制的核心手段，静态路由虽然简单，但无法满足不同角色、不同用户动态访问不同菜单的需求，通过动态路由可以根据用户权限实时生成可访问的路由表，既灵活又安全，本文将详细介绍Vue路由权限动态添加路由的实现原理、具体步骤及注意事项。

动态路由的核心逻辑

动态路由的本质是“权限匹配”与“路由注册”的结合，其核心流程可概括为：用户登录获取权限标识 → 前端根据权限标识过滤路由配置 → 动态注册可访问路由 → 路由守卫拦截未授权访问，这一流程需要前端与后端配合，后端返回用户权限数据,前端负责路由的动态生成与拦截。

准备工作：路由与权限标识设计

路由配置分类

将路由分为两类：

• 基础路由：无需权限即可访问的路由，如登录页、404页、首页等，这些路由在router/index.js中静态定义，直接挂载。
• 动态路由：需要权限才能访问的路由，如用户管理、订单管理等，这些路由在单独的文件（如router/dynamicRoutes.js）中配置，每个路由需通过meta字段声明权限标识。

权限标识设计

每个动态路由需在meta中定义permission字段，用于标识访问该路由所需的权限。

// router/dynamicRoutes.js
export default [
  {
    path: '/user',
    component: () => import('@/layout/index.vue'),
    meta: { title: '用户管理', permission: 'user:manage' },
    children: [
      {
        path: 'list',
        component: () => import('@/views/user/list.vue'),
        meta: { permission: 'user:list' } // 子路由可单独定义权限
      }
    ]
  },
  {
    path: '/order',
    component: () => import('@/layout/order.vue'),
    meta: { title: '订单管理', permission: 'order:manage' }
  }
]

这里user:manage、order:manage等是权限标识,需与后端返回的权限列表保持一致。

动态路由实现步骤

用户登录获取权限数据

用户登录成功后，后端需返回该用户的权限列表（如['user:list', 'order:manage']），前端将其存储在Vuex/Pinia或本地存储中，供后续路由生成使用。

根据权限过滤动态路由

编写路由过滤函数，遍历动态路由配置，筛选出用户有权限访问的路由。

// utils/permission.js
import dynamicRoutes from '@/router/dynamicRoutes'
export function filterAsyncRoutes(routes, permissions) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(permissions, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, permissions)
      }
      res.push(tmp)
    }
  })
  return res
}
function hasPermission(permissions, route) {
  if (route.meta && route.meta.permission) {
    return permissions.includes(route.meta.permission)
  } else {
    return true // 无权限要求的路由默认可访问
  }
}

调用该函数即可得到用户可访问的动态路由列表：const accessedRoutes = filterAsyncRoutes(dynamicRoutes, userPermissions)。

动态注册路由

使用Vue Router的addRoute方法将过滤后的路由添加到路由表中，注意需先添加基础路由，再动态添加权限路由，最后添加404路由（避免误拦截）。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import basicRoutes from './basicRoutes' // 基础路由（登录页、404等）
import dynamicRoutes from './dynamicRoutes'
import { filterAsyncRoutes } from '@/utils/permission'
const router = createRouter({
  history: createWebHistory(),
  routes: basicRoutes // 初始只添加基础路由
})
// 动态添加路由
export function addDynamicRoutes(permissions) {
  const accessedRoutes = filterAsyncRoutes(dynamicRoutes, permissions)
  accessedRoutes.forEach(route => {
    router.addRoute(route)
  })
  // 最后添加404路由（需放在动态路由之后）
  router.addRoute({ path: '/:pathMatch(.*)*', redirect: '/404' })
}
export default router

路由守卫拦截

在全局前置守卫beforeEach中判断用户权限：

• 若目标路由是基础路由（无需权限），直接放行；
• 若目标路由是动态路由，检查用户是否有对应权限，无权限则跳转403页面或登录页；
• 若用户未登录（如token不存在），跳转登录页。

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const permissions = JSON.parse(localStorage.getItem('permissions') || '[]')
  if (token) {
    if (to.path === '/login') {
      next('/') // 已登录用户访问登录页，跳转首页
    } else {
      // 检查是否已添加动态路由（避免重复添加）
      if (router.getRoutes().some(route => pathEqual(route.path, to.path))) {
        next()
      } else {
        // 动态添加路由后跳转
        addDynamicRoutes(permissions)
        next({ ...to, replace: true })
      }
    }
  } else {
    if (to.meta.requiresAuth) {
      next('/login') // 未登录访问需权限路由，跳转登录页
    } else {
      next() // 基础路由直接放行
    }
  }
})

常见问题处理

嵌套路由的权限控制

若父路由无权限但子路由有权限，需确保父路由能正常渲染（否则子路由无法显示），可通过调整过滤逻辑：父路由无permission字段时默认放行，子路由单独判断权限。

// 动态路由配置中，父路由不定义permission，子路由定义
{
  path: '/parent',
  component: ParentLayout,
  children: [
    { path: 'child', component: Child, meta: { permission: 'child:access' } }
  ]
}

刷新页面后动态路由丢失

由于Vue Router的路由表存储在内存中，刷新页面后会重置为初始路由（基础路由），解决方法是在app.vue的onMounted钩子中重新添加动态路由：

// App.vue
import { addDynamicRoutes } from '@/router'
import { useUserStore } from '@/stores/user'
export default {
  mounted() {
    const userStore = useUserStore()
    if (userStore.token) {
      addDynamicRoutes(userStore.permissions)
    }
  }
}

动态路由配置示例表

相关问答FAQs

Q1: 动态路由在页面刷新后丢失怎么办？
A: 动态路由依赖内存存储，刷新后会重置，解决方案是在应用初始化时（如App.vue的onMounted或路由守卫中）重新获取用户权限并调用addDynamicRoutes方法重新添加路由，同时需确保用户权限数据（如token、权限列表）在刷新后仍可获取（通常存储在localStorage或Vuex/Pinia中）。

Q2: 如何处理多级菜单（嵌套路由）的权限控制？
A: 嵌套路由的权限控制需遵循“父路由渲染，子路由过滤”原则：

1. 父路由不定义permission字段，确保只要有权限访问子路由，父路由就能正常渲染；
2. 子路由通过meta.permission定义独立权限，在过滤函数中递归判断子路由权限；
3. 若父路由需权限（如必须先有“用户管理”权限才能访问其子路由），则需在父路由定义permission，并在过滤时先判断父路由权限,再递归判断子路由。