vue怎么实现路由权限

路由权限的实现方式

在Vue中实现路由权限控制通常涉及前端和后端的协作。以下是几种常见的实现方法：

动态路由

通过用户角色或权限动态生成可访问的路由表。登录后根据用户权限筛选路由配置，并通过router.addRoutes动态添加。

// 过滤路由表
function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    } else {
      return true
    }
  })
}

// 动态添加路由
const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
router.addRoutes(accessedRoutes)

路由守卫

利用全局前置守卫beforeEach进行权限校验，未通过则重定向到登录页或403页面。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

权限指令

创建自定义指令控制页面元素的显示/隐藏，适用于按钮级权限控制。

Vue.directive('permission', {
  inserted: function(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 使用方式
<button v-permission="'admin'">删除</button>

元信息标记

在路由配置中添加meta字段标记所需权限，结合路由守卫进行校验。

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

后端校验

前端路由配置保持完整，但通过API接口返回用户实际可访问的路由。每次路由跳转时向后端请求验证权限。

async function checkRoutePermission(to) {
  try {
    const res = await axios.post('/api/check-route', { path: to.path })
    return res.data.allowed
  } catch {
    return false
  }
}

缓存策略

将权限信息存储在Vuex或Pinia中，避免频繁请求后端。配合持久化插件实现刷新后权限不丢失。

// store/modules/permission.js
state: {
  routes: [],
  addRoutes: []
},
mutations: {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

错误处理

为权限验证失败的情况准备统一的错误页面，提升用户体验。

// 路由配置
{
  path: '/403',
  component: () => import('@/views/error/403')
}

// 守卫中使用
next({ path: '/403', replace: true })

最佳实践

1. 前端应做基础权限校验，但关键权限需后端最终验证
2. 敏感路由建议配置404重定向，避免暴露路由结构
3. 按钮级权限推荐使用自定义指令实现
4. 动态路由方案需处理好路由重置问题
5. 开发环境可配置权限mock系统方便调试