vue route实现权限控制
Vue Router 实现权限控制的方法
路由元信息（meta）结合导航守卫
在路由配置中通过meta字段标记权限信息，例如requiresAuth或roles。在全局前置守卫router.beforeEach中校验用户权限，动态决定跳转逻辑。
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
router.beforeEach((to, from, next) => {
const userRole = getUserRole() // 获取当前用户角色
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.includes(userRole)) {
next('/403') // 无权限跳转
} else {
next()
}
})动态路由表生成
根据用户权限动态生成路由表。初始化时过滤无权限的路由，或通过router.addRoutes添加权限路由（Vue 2.x）。
// 过滤路由示例
function filterRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta?.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true
})
}
// Vue 3.x 动态添加路由
const dynamicRoutes = [
{ path: '/admin', component: Admin, meta: { roles: ['admin'] } }
]
router.removeRoute('admin') // 先移除可能存在的旧路由
router.addRoute(dynamicRoutes[0])组件级权限控制
在组件内使用自定义指令或函数进行细粒度控制。例如实现v-permission指令：
// 注册全局指令
app.directive('permission', {
mounted(el, binding) {
const userRoles = store.getters.roles
if (!binding.value.some(role => userRoles.includes(role))) {
el.parentNode.removeChild(el)
}
}
})
// 组件中使用
<button v-permission="['admin']">删除</button>服务端返回路由表
将路由配置存储在服务端，根据用户权限返回对应的路由结构。前端通过router.addRoute动态构建路由。
// 获取服务端路由配置
axios.get('/api/user-routes').then(response => {
response.data.forEach(route => {
router.addRoute(route)
})
})404页面处理
动态路由场景下需确保404页面最后添加，避免被提前匹配：
router.addRoute({ path: '/:pathMatch(.*)*', component: NotFound })权限变更处理
监听权限变化时需重置路由：
watch(() => store.state.roles, (newVal) => {
resetRouter() // 清空现有路由
initRoutes(newVal) // 重新初始化
})
