vue自定义指令 设置按钮权限

//自定义指令:

// 注册一个全局自定义指令 `v-auth`
Vue.directive('auth', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: (el, binding, vnode) => {
    const value = binding.value;
 
    const auths = localStorage.getItem('BTN_AUTHS') || '';
 
    if (!auths.split(',').includes(value)) {
      el.parentNode!.removeChild(el);
    }
  }
});
//使用指令：

<el-button type="primary" v-auth="`BTN_AUTH`">新增</el-button>
//这样，如果 「localStorage」 中的对象 「BTN_AUTHS」 如果包含 「BTN_AUTH」 按钮编码，则说明用户有该按钮权限，页面将显示该按钮，否则不对其进行渲染

更多请看原文
原文链接：https://blog.csdn.net/weixin_45614615/article/details/109324399