vue实现权限路由

Vue 实现权限路由的方法

动态路由加载

在用户登录后根据权限获取路由配置，通过 router.addRoutes 动态添加路由。需要预先定义全量路由表，过滤出用户有权限的路由。

// 假设从后端获取的用户权限标识
const userPermissions = ['admin', 'editor']

// 过滤有权限的路由
const filterRoutes = (routes) => {
  return routes.filter(route => {
    if (route.meta && route.meta.permissions) {
      return route.meta.permissions.some(perm => 
        userPermissions.includes(perm)
      )
    }
    return true
  })
}

// 动态添加路由
const asyncRoutes = filterRoutes(asyncRoutesConfig)
router.addRoutes(asyncRoutes)

路由守卫控制

在全局前置守卫 router.beforeEach 中进行权限校验，结合元信息 meta 字段判断是否有访问权限。

router.beforeEach((to, from, next) => {
  const hasPermission = to.matched.some(record => {
    if (record.meta.permissions) {
      return record.meta.permissions.some(perm => 
        userPermissions.includes(perm)
      )
    }
    return true
  })

  if (!hasPermission) {
    next('/403') // 跳转到无权限页面
  } else {
    next()
  }
})

基于角色的权限控制

在路由配置中使用 meta.roles 字段，根据用户角色过滤路由。

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

菜单权限同步

侧边栏菜单需要与路由权限同步，通过遍历权限路由生成菜单项。使用 vuex 存储权限路由数据，在菜单组件中获取渲染。

// 在菜单组件中
computed: {
  menuItems() {
    return this.$store.state.permission.routes
  }
}

按钮级权限控制

通过自定义指令 v-permission 实现按钮级别的权限控制。

Vue.directive('permission', {
  inserted(el, binding) {
    if (!userPermissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

404 页面处理

在路由配置最后添加 404 通配路由，确保无权限或错误路径能正确跳转。

{
  path: '*',
  redirect: '/404'
}

以上方法可根据实际项目需求组合使用，建议将权限逻辑集中管理，保持代码可维护性。对于复杂系统，可考虑将路由配置和权限数据交由后端处理，前端只负责动态渲染。