vue指令实现权限
Vue 指令实现权限控制
在 Vue 中，可以通过自定义指令来实现前端权限控制。以下是一种常见的实现方式：
自定义权限指令
// 在 main.js 或单独的文件中定义指令
Vue.directive('permission', {
inserted: function(el, binding, vnode) {
const { value } = binding
const permissions = vnode.context.$store.getters.permissions
if (value && value instanceof Array && value.length > 0) {
const hasPermission = permissions.some(permission => {
return value.includes(permission)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`需要指定权限数组，如 v-permission="['admin']"`)
}
}
})使用方法
<template>
<button v-permission="['admin']">只有管理员可见</button>
<button v-permission="['editor', 'admin']">编辑和管理员可见</button>
</template>权限数据管理
通常在 Vuex 中管理权限数据：
// store/modules/user.js
const state = {
permissions: []
}
const getters = {
permissions: state => state.permissions
}
const mutations = {
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
}路由权限控制
结合路由守卫实现页面级别的权限控制：
router.beforeEach((to, from, next) => {
const hasPermission = store.getters.permissions.some(permission => {
return to.meta.permissions.includes(permission)
})
if (to.meta.permissions && !hasPermission) {
next('/403')
} else {
next()
}
})按钮级别的权限控制
对于更细粒度的按钮权限，可以在方法中校验：
methods: {
handleEdit() {
if (!this.checkPermission(['editor'])) {
return this.$message.error('无权限操作')
}
// 执行编辑操作
},
checkPermission(permissions) {
return this.$store.getters.permissions.some(p => permissions.includes(p))
}
}注意事项
- 前端权限控制只是用户体验优化，后端必须进行真正的权限验证
- 权限数据通常在用户登录后从后端获取并存储在 Vuex 中
- 对于复杂的权限系统，可以考虑使用 RBAC (基于角色的访问控制) 模型
- 权限变更时需及时更新前端存储的权限数据
