当前位置：首页 > VUE

权限 vue组件实现

2026-01-19 12:57:57VUE

权限 Vue 组件实现

在 Vue 中实现权限控制通常涉及前端路由守卫、动态菜单渲染和按钮级权限控制。以下是几种常见的实现方法：

基于路由守卫的权限控制

通过全局前置守卫 beforeEach 校验用户权限，未授权用户跳转至登录页或提示页：

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

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

动态菜单渲染

根据用户权限过滤可访问的路由，生成侧边栏菜单：

// utils/permission.js
export function filterAsyncRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta?.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

按钮级权限指令

通过自定义指令 v-permission 控制按钮显示：

// directives/permission.js
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = vnode.context.$store.getters.permissions

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

权限组件封装

创建可复用的权限校验组件：

<template>
  <div v-if="checkPermission()">
    <slot />
  </div>
</template>

<script>
export default {
  props: ['requiredPermission'],
  methods: {
    checkPermission() {
      return this.$store.getters.permissions.includes(this.requiredPermission)
    }
  }
}
</script>

权限数据管理

建议将权限数据存储在 Vuex 中集中管理：

权限 vue组件实现

// store/modules/user.js
export default {
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  }
}

以上方法可组合使用，根据项目复杂度选择适合的方案。对于中小型项目，路由守卫配合指令即可满足需求；大型系统建议采用动态路由加载配合细粒度权限校验。