当前位置：首页 > VUE

vue怎么实现权限路由

2026-01-21 01:51:56VUE

Vue 实现权限路由的方法

动态路由加载

通过用户登录后获取的权限信息动态加载路由。使用 router.addRoutes 方法将权限路由添加到路由实例中。

// 用户登录后获取权限列表
const permissionRoutes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, roles: ['admin'] }
  }
]

// 动态添加路由
router.addRoutes(permissionRoutes)

路由守卫控制

在全局前置守卫 beforeEach 中检查路由元信息 meta，结合用户权限进行拦截。

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiredRoles = to.meta.roles

  if (requiresAuth && !userRoles) {
    next('/login')
  } else if (requiredRoles && !requiredRoles.some(role => userRoles.includes(role))) {
    next('/403')
  } else {
    next()
  }
})

权限指令控制

通过自定义指令 v-permission 控制页面元素的显示隐藏。

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = roles.some(role => value.includes(role))

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
})

菜单权限过滤

根据用户权限过滤生成侧边栏菜单，通常与动态路由配合使用。

computed: {
  accessibleRoutes() {
    return this.$store.getters.routes.filter(route => {
      return route.meta && route.meta.roles && route.meta.roles.includes(this.$store.getters.role)
    })
  }
}

服务端控制路由

更安全的做法是由服务端返回权限路由列表，前端完全依赖服务端数据渲染路由。

// 从API获取权限路由
api.getRoutes().then(routes => {
  const accessedRoutes = filterAsyncRoutes(routes)
  router.addRoutes(accessedRoutes)
})

function filterAsyncRoutes(routes) {
  return routes.filter(route => {
    if (hasPermission(route.meta.roles)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children)
      }
      return true
    }
    return false
  })
}