当前位置：首页 > VUE

vue实现前端权限

2026-01-16 06:22:07VUE

Vue 前端权限实现方案

前端权限控制的核心在于根据用户角色或权限动态控制页面访问、菜单展示和操作按钮。以下是几种常见的实现方式：

基于路由的权限控制

通过路由守卫拦截未授权访问，动态生成可访问路由表：

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

// 动态添加路由
const asyncRoutes = [
  { path: '/admin', component: Admin, meta: { requiredRoles: ['admin'] } }
]
store.dispatch('user/getInfo').then(roles => {
  const accessedRoutes = filterRoutes(asyncRoutes, roles)
  router.addRoutes(accessedRoutes)
})

指令式权限控制

使用自定义指令控制元素级别的权限：

vue实现前端权限

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 使用方式
<button v-permission="'user:create'">创建用户</button>

权限数据存储方案

推荐使用 Vuex 集中管理权限状态：

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

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

菜单权限过滤

根据权限树过滤生成可用菜单：

vue实现前端权限

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

按钮级权限组件

封装权限判断组件：

<template>
  <slot v-if="show"></slot>
</template>

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

<!-- 使用方式 -->
<permission-check permission="user:delete">
  <button>删除</button>
</permission-check>

权限校验工具函数

通用权限校验方法示例：

function checkPermission(requiredPermissions) {
  const userPermissions = store.getters.permissions
  return requiredPermissions.some(perm => userPermissions.includes(perm))
}