在使用 vue-element-admin 框架进行开发时，您可以通过自定义指令来实现按钮级的权限控制。这个自定义指令可以根据用户的权限动态地控制按钮的显示。以下是一个详细的实现步骤：
1、在 src 目录下按照如下目录结构，创建一个权限文件，例如 permission.js：
目录结构：src/directive/permission/permission.js
// src/directive/permission/permission.js import store from '@/store'export default {inserted(el, binding) {const { value } = bindingconst roles = store.getters && store.getters.rolesif (value && value instanceof Array && value.length > 0) {const permissionRoles = valueconst hasPermission = roles.some(role => {return permissionRoles.includes(role)})if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`need roles! Like v-permission="['admin','editor']"`)}} }
2、在同个目录下创建一个指令注册文件，例如 index.js：
目录结构：// src/directive/permission/index.js
// src/directive/permission/index.js import Vue from 'vue' import permission from './permission'Vue.directive('permission', permission)
3、在 main.js 文件中引入并注册这个指令：
// src/main.js import Vue from 'vue' import App from './App.vue' import store from './store' import router from './router' import '@/directive/permission' // 引入权限控制指令new Vue({el: '#app',router,store,render: h => h(App) })
4、在组件中使用自定义指令：
在任何需要权限控制的地方使用 v-permission 指令。例如：
<template><div><button v-permission="['admin']">Admin Button</button><button v-permission="['editor', 'admin']">Editor or Admin Button</button></div> </template><script> export default {name: 'PermissionExample' } </script>
5、确保在 Vuex Store 中有 roles 的 getter：
// src/store/getters.js const getters = { roles: state => state.user.roles // 其他getters... } export default getters
并确保在 src/store/modules/user.js 中有 roles 的状态：
// src/store/modules/user.js const state = {roles: []// 其他状态... }const mutations = {SET_ROLES: (state, roles) => {state.roles = roles},// 其他mutations... }const actions = {// 其他actions... }export default {namespaced: true,state,mutations,actions }
6、在用户登录后设置用户的权限：
// src/store/modules/user.js const actions = {// 登录后获取用户信息，包括权限 async getUserInfo({ commit }) {// 假设从 API 获取用户信息const { roles } = await api.getUserInfo()commit('SET_ROLES', roles)}// 其他actions... }
通过上述步骤，您可以在 vue-element-admin 项目中实现按钮级的权限控制。每个按钮根据 v-permission 指令动态显示或隐藏，确保只有拥有相应权限的用户才能看到和操作这些按钮。
5.6 就是确保用户登录后，将角色清单存储在store中的。然后验证时，从store中获取。
注我的个人公众号，每日更新，获取更多技术知识
