当前位置：首页 > VUE

vue实现前端权限

2026-02-17 07:30:45VUE

Vue 前端权限实现方案

在 Vue 中实现前端权限控制通常需要结合后端返回的权限数据，通过路由守卫、指令、组件等方式进行权限校验。以下是几种常见的实现方法：

基于路由的权限控制

通过动态路由和路由守卫实现权限过滤，未授权的路由将被拦截。

// router/index.js
const router = new VueRouter({...})

// 假设从后端获取用户权限列表
const userPermissions = ['dashboard', 'user_manage']

// 动态添加路由
const asyncRoutes = [
  { path: '/dashboard', component: Dashboard, meta: { permission: 'dashboard' }},
  { path: '/user', component: UserManage, meta: { permission: 'user_manage' }}
]

// 过滤有权限的路由
const allowedRoutes = asyncRoutes.filter(route => 
  userPermissions.includes(route.meta.permission)
)
router.addRoutes(allowedRoutes)

// 全局路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.permission && !userPermissions.includes(to.meta.permission)) {
    next('/403') // 无权限跳转到403页面
  } else {
    next()
  }
})

自定义权限指令

通过 Vue 指令控制页面元素的显示/隐藏。

vue实现前端权限

// main.js
Vue.directive('permission', {
  inserted: (el, binding) => {
    const permissions = ['edit', 'delete'] // 从store获取
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 使用方式
<button v-permission="'edit'">编辑</button>

权限组件封装

创建权限校验组件，包裹需要控制的内容。

// components/Permission.vue
<template>
  <div v-if="checkPermission">
    <slot />
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    checkPermission() {
      const userPermissions = this.$store.state.permissions
      return userPermissions.includes(this.value)
    }
  }
}
</script>

// 使用方式
<permission :value="'delete'">
  <button>删除</button>
</permission>

全局权限校验方法

在 Vue 原型上挂载权限校验方法，方便全局调用。

vue实现前端权限

// main.js
Vue.prototype.$hasPermission = function(permission) {
  return this.$store.state.permissions.includes(permission)
}

// 使用方式
created() {
  if (!this.$hasPermission('view')) {
    this.$router.push('/403')
  }
}

状态管理集成

将权限数据存储在 Vuex 中集中管理。

// store/modules/auth.js
export default {
  state: {
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    fetchPermissions({ commit }) {
      return api.getPermissions().then(res => {
        commit('SET_PERMISSIONS', res.data)
      })
    }
  }
}

按钮级权限控制

结合计算属性实现按钮显示控制。

<template>
  <button v-if="hasCreatePermission">创建</button>
</template>

<script>
export default {
  computed: {
    hasCreatePermission() {
      return this.$store.state.permissions.includes('create')
    }
  }
}
</script>