当前位置：首页 > VUE

vue权限控制实现

2026-01-19 11:20:06VUE

Vue 权限控制实现方法

路由级权限控制

通过路由守卫（beforeEach）实现动态路由过滤，结合用户角色或权限列表控制访问。

// router.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.requiredRole)
  if (hasPermission) next()
  else next('/forbidden')
})

function checkUserPermission(requiredRole) {
  const userRoles = store.getters.roles
  return requiredRole ? userRoles.includes(requiredRole) : true
}

组件级权限控制

使用自定义指令v-permission控制组件渲染，适用于按钮/菜单等细粒度控制。

vue权限控制实现

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

    if (!permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

接口级权限控制

在axios拦截器中校验请求权限，拦截未授权的API调用。

// http.js
service.interceptors.request.use(config => {
  if (config.requiresAuth && !store.getters.token) {
    return Promise.reject(new Error('Need login'))
  }
  return config
})

动态菜单生成

根据权限树动态生成导航菜单，需后端返回权限结构。

vue权限控制实现

// store.js
actions: {
  async generateRoutes({ commit }) {
    const accessedRoutes = await filterAsyncRoutes(asyncRoutes)
    commit('SET_ROUTES', accessedRoutes)
  }
}

权限数据管理

推荐使用Vuex集中管理权限状态，包含以下核心字段：

roles: 用户角色数组
permissions: 权限标识集合
menus: 可访问菜单树

权限指令扩展

对于复杂场景可扩展权限指令，支持角色/权限组合校验。

Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const hasPermission = checkPermission(value)
    !hasPermission && el.parentNode.removeChild(el)
  }
})