Vue 3 自定义权限指令 v-action

在实际的前端开发中,尤其是涉及到权限管理的系统,我们经常需要根据用户的权限动态控制某些按钮的显示和隐藏。例如:在一个后台管理系统中,不同角色的用户可能拥有不同的操作权限,比如「查看」、「编辑」、「删除」等。为了避免用户无权操作某些功能,通常需要在组件或模板中手动添加权限判断逻辑。

然而,如果在每个需要权限控制的地方都手写 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 项目里非常实用,特别适用于 权限控制场景!

相关推荐
musk12124 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘33 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref