vue实现按钮级权限

在 Vue 中实现按钮级别的权限，可以采用如下几种方式：

1. 基于路由懒加载

在 Vue Router 中，可以使用路由懒加载实现页面级别的权限控制。对于按钮级别的权限控制，我们可以采用相同的思路。

针对不同级别的权限，可以在路由中定义多个组件，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true // 页面需要登录态
      }
    },
    {
      path: '/user',
      component: User,
      children: [
        {
          path: 'list',
          name: 'user-list',
          components: {
            default: UserList,
            admin: UserListAdmin // 管理员权限
          },
          meta: {
            requiresAuth: true // 页面需要登录态
          }
        },
      ]
    },
  ]
})

在组件中，可以使用路由元信息中的meta.requiresAuth属性区分需要登录的页面。在组件中，可以通过this.$route.matched.some(route => route.meta.requiresAuth)来判断用户是否有权限访问该页面。

对于按钮级别的权限，可以在路由元信息中定义一个permissions属性，它是一个数组，包含了能够访问该按钮的角色列表。在组件中，通过当前用户的角色信息和元信息中的permissions属性进行判断。

2. 基于 v-if/directive 的自定义指令

将权限控制逻辑封装在自定义指令中，可以更加方便地管理权限。

例如，在组件中定义一个自定义指令v-permission：

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

其中，checkPermission()方法用于判断用户是否有权限访问该按钮，返回值为布尔类型。然后，在按钮中使用该指令：

<button v-permission="'admin'">只有管理员可见</button>

当用户不具备该按钮的权限时，该按钮将会被删除。

3. 基于 Vuex 的状态管理

对于多个组件需要共享的权限信息，可以使用 Vuex 管理状态。

在 Vuex 中，可以定义一个存储用户权限信息的状态permissions，并且定义一个判断用户权限的方法，例如：

const store = new Vuex.Store({
  state: {
    permissions: ['admin'] // 用户权限列表
  },
  getters: {
    canAccess: state => permission => {
      return state.permissions.includes(permission)
    }
  }
})

在组件中，可以使用mapGetters辅助函数将canAccess方法映射到组件中：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      canAccess: 'canAccess'
    })
  }
}

然后，在模板中使用如下方式进行权限控制：

<button v-if="canAccess('admin')">只有管理员可见</button>

通过使用 Vuex 进行状态管理，可以更加灵活地管理用户权限信息。

除上述三种方式外，还可以结合后端接口返回的用户权限信息，在组件中进行渲染、路由拦截等操作实现按钮级别的权限控制。