在实际的前端开发中,尤其是涉及到权限管理的系统,我们经常需要根据用户的权限动态控制某些按钮的显示和隐藏。例如:在一个后台管理系统中,不同角色的用户可能拥有不同的操作权限,比如「查看」、「编辑」、「删除」等。为了避免用户无权操作某些功能,通常需要在组件或模板中手动添加权限判断逻辑。
然而,如果在每个需要权限控制的地方都手写 v-if 或 v-show 来判断,代码会变得冗余且难以维护。为了解决这个问题,可以利用 Vue 3 的自定义指令 来封装权限控制逻辑,使得权限管理变得更直观、可复用,进而提升代码的可读性和可维护性。
举出一个实际可用的 🌰
javascript
/**
* 根据权限(binding)决定 el 的显示隐藏
* @param {*} el 指令绑定的 DOM 元素,Vue 传递给指令的 el 参数
* @param {*} binding 指令的绑定值对象,包含传递指令的值。比如:v-action="'actionCode'",那么 binding.value 就是 'actionCode'。
* @returns
*/
function updateVisibility(el, binding) {
// 获取权限列表
const { _actions } = window;
// 如果没有指定权限值,默认「显示」
if (!binding.value) {
el.style.display = '';
return;
}
// 根据权限判断是否隐藏
el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action:自定义指令对象
const action = {
// 指令绑定的元素被插入到 DOM 时触发
mounted(el, binding) {
updateVisibility(el, binding);
},
// 当组件 props 或 data 发生变化导致 DOM 更新 时触发。
updated(el, binding) {
updateVisibility(el, binding);
},
};
// 注册全局指令
export default {
install(app) {
// 在 Vue 应用上 注册全局指令 v-action,让所有组件都可以使用 v-action 来控制元素的显示。
app.directive('action', action);
},
};
这个代码是一个 Vue 3 的自定义指令(v-action), 用于根据用户的权限控制元素的显示与隐藏。它会在 mounted 和 updated 阶段检查权限,并根据权限决定是否显示元素。
🌟总结
v-action 这个指令的作用是 根据用户权限 (window._actions) 控制元素的显示。
- 用户没有权限 → 隐藏该元素(display: none)。
- 用户有权限 → 显示该元素(display: '')。
- 没有传递 v-action 的值 → 默认显示。
🌟 使用方式
在 Vue 组件的模板中:
html
<template>
<button v-action="'_EDIT'">编辑</button>
</template>
只有 _actions 数组包含 '_EDIT',按钮才会显示。如果 window._actions 不包含 '_EDIT',按钮会被隐藏。
这个代码在 Vue 3 项目里非常实用,特别适用于 权限控制场景!