vue按钮权限实现

Vue 按钮权限实现方法

基于指令的权限控制

通过自定义指令 v-permission 实现按钮级别的权限控制。在项目中创建 permission.js 文件：

import store from '@/store'

function checkPermission(el, binding) {
  const { value } = binding
  const roles = store.getters && store.getters.roles

  if (value && value instanceof Array) {
    if (value.length > 0) {
      const permissionRoles = value
      const hasPermission = roles.some(role => permissionRoles.includes(role))

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  } else {
    throw new Error(`需要指定权限数组，如 v-permission="['admin','editor']"`)
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}

在 main.js 中全局注册指令：

import permission from './directive/permission'
Vue.directive('permission', permission)

基于路由守卫的权限控制

在路由配置中定义 meta 字段，通过全局前置守卫检查权限：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: { 
        requiresAuth: true,
        roles: ['admin'] 
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const hasRoles = store.getters.roles.some(role => 
    to.meta.roles.includes(role)
  )

  if (to.meta.roles && !hasRoles) {
    next('/403')
  } else {
    next()
  }
})

基于组件函数的权限控制

在组件方法中使用权限判断逻辑：

methods: {
  handleEdit() {
    if (!this.$store.getters.roles.includes('editor')) {
      this.$message.error('无权限操作')
      return
    }
    // 执行编辑操作
  }
}

权限数据管理

使用 Vuex 存储和管理权限数据：

const store = new Vuex.Store({
  state: {
    roles: []
  },
  mutations: {
    SET_ROLES(state, roles) {
      state.roles = roles
    }
  },
  actions: {
    async getRoles({ commit }) {
      const res = await api.getRoles()
      commit('SET_ROLES', res.data)
    }
  },
  getters: {
    roles: state => state.roles
  }
})

按钮权限使用示例

在模板中使用权限指令：

<template>
  <div>
    <button v-permission="['admin']">管理员按钮</button>
    <button v-permission="['editor']">编辑按钮</button>
  </div>
</template>

这些方法可以单独使用或组合使用，根据项目需求选择最适合的方案。基于指令的方式适合简单的按钮权限控制，路由守卫适合页面级别的权限，而组件函数方式则适合复杂的业务逻辑权限判断。