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