在使用 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 } = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value
const 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中获取。
注我的个人公众号，每日更新，获取更多技术知识
