当前位置：首页 > VUE

vue怎么实现权限路由

2026-02-21 17:25:51VUE

Vue 权限路由实现方法

基于路由守卫的动态权限控制

在路由配置中定义 meta 字段，标记需要权限的路由。通过全局前置守卫 beforeEach 进行权限校验。

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

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles // 从Vuex获取用户角色
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!userRoles) {
      next('/login')
    } else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
      next('/403') // 无权限页面
    } else {
      next()
    }
  } else {
    next()
  }
})

动态路由表生成

根据用户权限动态生成路由表，通常在后端返回权限数据后处理。

// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

// 添加动态路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
  router.addRoutes(accessRoutes)
})

基于Vuex的权限状态管理

在Vuex中存储用户权限信息，方便全局访问和更新。

// store/modules/permission.js
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

菜单权限控制

结合Element UI等组件库，动态渲染侧边栏菜单。

<template>
  <el-menu :default-active="$route.path">
    <sidebar-item 
      v-for="route in permission_routes"
      :key="route.path"
      :item="route"
    />
  </el-menu>
</template>

computed: {
  ...mapGetters(['permission_routes'])
}

按钮级权限控制

通过自定义指令实现按钮级别的权限控制。

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

    if (value && !roles.some(role => value.includes(role))) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

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

后端接口配合

建议采用前后端分离的权限设计，后端返回路由结构或权限标识。

// 典型API响应格式
{
  "code": 200,
  "data": {
    "roles": ["admin"],
    "routes": [
      {
        "path": "/dashboard",
        "component": "Layout",
        "children": [...]
      }
    ]
  }
}

权限变更处理

监听权限变化事件，及时更新路由和界面。

vue怎么实现权限路由

watch: {
  roles(newVal) {
    this.$store.dispatch('GenerateRoutes', newVal).then(() => {
      this.$router.addRoutes(this.$store.getters.addRoutes)
    })
  }
}