按钮权限控制实现方案

背景：某些管理系统需增加 ”按钮权限控制“ 功能，对权限的控制粒度要普及到按钮层级

预期

按钮权限控制的交互方式无非两种：”不可见” 和 “可见不可点”。

不可见

不可见的交互方式相对简单，我们可使用 v-if 控制其是否显示。使用 v-show 也行，但不够保险，毕竟 v-show 只是把样式改成 display: none，在真实的 DOM 渲染还是存在的，所以更推荐 v-if 来控制不可见。

可见不可点

“看是能看了，但你不行了”。

  • 样式控制（得加个禁用样式），什么 cursor: not-allowed ，置灰之类的云云；
  • 不可点击，即要禁用或屏蔽点击事件，好像有 preventDefault/stopProgration 可实现；

最终产品需求选择了 “可见不可点”，原因可能就觉得不可见太简单了。(¬_¬)

思路探索

  • 给按钮点击事件的回调函数，加个包装函数，对其权限控制，进行事件拦截与触发。相当是做了个代理，有点高阶组件那意思（但对现有业务改动太大，得对每个@click绑定函数逐个修改，遂放弃该方案）；
  • 阻止按钮点击事件冒泡与触发，貌似能用上 preventDefautl/stopProgration, 感觉能用指令的方式对 DOM 元素进行事件监听，允许的话则让事件正常执行，不允许则拦截屏蔽；

实践方案

最终选择了指令的方式，最小成本扩展，避免改动现有业务代码逻辑。
针对权限控制需做点击劫持的元素：

  • el-button
  • btn-wrapper（自封装组件）
  • div/span/a 等标签

具体实现：

权限入口：Vuex 控制，全局使用

1
2
3
4
5
6
7
8
9
10
11
12
// 用户登陆后，获取该用户权限 CODE 码，并存储至 store
this.$store.commit('SET_AUTH_CODE', authCodeList);

SET_AUTH_CODE: (state, acthCode) => {
  if (acthCode) {
      state.autoCodeList = acthCode;
  }
  setStore({
    name: 'autoCodeList',
    content: state.autoCodeList || [],
  });
}

定义权限指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const disableClickFn = (event) => {
    event && event.stopImmediatePropagation();
}

export const hasPermission = () => {
    Vue.directive('permission', {
        bind(el, binding) {
            let disalbe = true;
            if (autoCodeList.length && autoCodeList.includes(binding.value)) {
                disable = false;
            }

            if (disable) {
                el.classList.add('permission-disabled');
                el.setAttribute('disabled', 'disabled');
                el.addEventListener('click', disableClickFn, true);
            }
        },
        unbind(el) {
            el.removeEventListener('click', disableClickFn);
        }
    });
}
  • 首先 addEventListener 第三个参数我们使用 useCapture 为 true 让其在捕获阶段触发，因此这里的事件监听器会优先 @click 触发回调；
  • 其次使用了 stopImmediatePropagation 阻止事件冒泡和其它相同事件监听器的触发；

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

增加禁用的 CSS 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.permission-disabled {
    position: relative;
    cursor: not-allowed !important;
    pointer-events: none;  // 阻止元素成为鼠标事件
    border:none;
    background-image: none;
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0px;
        right: 0px;
        height: 100%;
        z-index: 9;
        background: rgba(255, 255, 255, 0.5);
    }
}

CSS3 的 pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

这里使用 pointer-events 只是一个辅助功能，并不一定意味着元素上的事件监听器永远不会触发，如果后代元素有指定 pointer-events 并允许成为事件目标的话，是可以触发父元素事件，而且单纯依靠 CSS 属性来控制不点击，还是有风险，因此这里仅作辅助作用。

全局 “权限判断” 工具函数

1
2
3
4
5
6
import { getStore } from '@/util/store';
const autoCodeList = getStore({ name: 'autoCodeList', }) || [];

export function hasPermission(authName) {
    return !(autoCodeList.length > 0 && autoCodeList.includes(authName));
}

具体使用

1
2
3
4
5
// 指令方式（这里的 sys/auth/save 就是对应用户登陆时 CODE 权限码）
<el-button v-permission="'sys:auth:save'">保存</el-button>

// 函数方式
<el-button :disabled="hasPermission('sys:auth:save')"></el-button>