Vue路由模块化与权限管理

作者：sss 发布时间：2025年11月25日

通过后台info接口获role信息 设置一个特殊的用户名superadmin 默认角色superadmin即可把菜单分成普通用户和超级管理员的

然后超级管理员通过后台就可以给普通用户配置菜单和权限这些信息了 vue-element-admin 非常好用

路由模块化的好处

当项目变大时，把所有路由写在一个文件里会很难维护。我们可以把路由按功能模块拆分：

javascript
// systemRouter.js - 系统管理路由
import Layout from '@/layout'

const systemRouter = {
  path: '/system',
  component: Layout,
  redirect: '/system/users',
  name: 'system',
  meta: {
    title: '系统管理',
    roles: ['super-admin'],  // 只有超级管理员能访问
    icon: 'el-icon-setting'
  },
  children: [
    {
      path: 'users',
      component: () => import('@/views/system/users'),
      name: 'users',
      meta: {
        title: '用户管理',
        roles: ['super-admin'],
        icon: 'list'
      }
    },
    {
      path: 'role',
      component: () => import('@/views/system/role'),
      name: 'role', 
      meta: {
        title: '角色管理',
        roles: ['super-admin'],
        icon: 'list'
      }
    }
  ]
}

export default systemRouter

权限控制实现

1. 路由守卫检查权限

javascript
// 在路由跳转前检查权限
router.beforeEach((to, from, next) => {
  const userRole = store.getters.role // 从Vuex获取用户角色
  
  if (to.meta && to.meta.roles) {
    // 检查用户角色是否在允许的角色列表中
    if (to.meta.roles.includes(userRole)) {
      next() // 有权限，放行
    } else {
      next('/403') // 无权限，跳转到403页面
    }
  } else {
    next() // 不需要权限的路由
  }
})

2. 动态生成菜单

根据用户角色过滤有权限的菜单：

javascript
function filterMenu(routes, userRole) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return route.meta.roles.includes(userRole)
    }
    return true
  })
}

模块化路由的使用

1. 创建多个路由模块

javascript
// userRouter.js - 用户相关路由
const userRouter = {
  path: '/user',
  component: Layout,
  children: [
    {
      path: 'profile',
      component: () => import('@/views/user/profile'),
      meta: { title: '个人中心', roles: ['user', 'admin'] }
    }
  ]
}

// orderRouter.js - 订单相关路由  
const orderRouter = {
  path: '/order',
  component: Layout,
  meta: { roles: ['user', 'admin'] },
  children: [
    // 订单路由...
  ]
}

2. 在主路由文件中合并

javascript
// router/index.js
import systemRouter from './modules/systemRouter'
import userRouter from './modules/userRouter' 
import orderRouter from './modules/orderRouter'

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard'
  },
  systemRouter,
  userRouter,
  orderRouter,
  // 其他路由...
]

const router = new VueRouter({
  routes
})

优势总结

  1. 代码清晰 - 每个功能模块的路由独立管理

  2. 易于维护 - 修改某个模块不影响其他部分

  3. 权限明确 - 每个路由都清楚标注需要的角色权限

  4. 按需加载 - 使用import()实现页面懒加载，提升性能

这种设计让大型项目的路由管理变得简单有序，特别适合需要精细权限控制的系统。