vue router权限实现
Vue Router 权限实现方法
在 Vue 应用中实现路由权限控制通常涉及动态路由、导航守卫和用户角色验证。以下是几种常见的实现方式：
基于导航守卫的权限控制
导航守卫（beforeEach）可以在路由跳转前进行权限校验：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})在路由配置中添加元信息标记需要权限的路由：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]动态路由添加
根据用户权限动态生成可访问的路由表：
// 基础路由（所有用户可见）
const constantRoutes = [
{ path: '/login', component: Login }
]
// 权限路由（动态添加）
const asyncRoutes = [
{ path: '/admin', component: Admin, meta: { roles: ['admin'] } }
]
// 根据用户角色过滤路由
function filterRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true
})
}
// 用户登录后添加路由
const allowedRoutes = filterRoutes(asyncRoutes, user.roles)
router.addRoutes(allowedRoutes)基于权限指令的UI控制
在模板中使用自定义指令控制元素显示：
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
})模板中使用：
<button v-permission="['admin']">管理员按钮</button>服务端返回路由表
更安全的做法是由服务端返回用户可访问的路由配置：
// 前端请求获取权限路由
api.getUserRoutes().then(routes => {
const parsedRoutes = parseRoutes(routes) // 解析服务端返回的路由配置
router.addRoutes(parsedRoutes)
})路由元信息多级权限
支持更复杂的权限控制场景：
{
path: '/user',
component: User,
meta: {
permissions: [
{ action: 'read', subject: 'User' },
{ action: 'write', subject: 'User' }
]
}
}在导航守卫中检查这些权限：
router.beforeEach((to, from, next) => {
if (to.meta.permissions) {
const hasPermission = checkPermissions(to.meta.permissions)
if (!hasPermission) return next('/403')
}
next()
})注意事项
- 权限验证应该同时在客户端和服务端进行，前端控制只是用户体验优化
- 动态添加路由后，需要处理404页面的匹配问题
- 路由权限信息应该与菜单渲染逻辑保持一致
- 使用Vuex存储权限状态可以方便全局访问
以上方法可以单独使用，也可以组合实现更完善的权限控制系统。根据项目复杂度选择合适的方式，简单项目使用导航守卫即可，复杂系统建议采用动态路由+服务端验证方案。
