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