Vue自定义指令实现按钮权限管理

1. 前言

在 《从头再学 Vue 的指令》介绍了什么是 Vue 指令，以及如何实现自定义指令。接下来我们通过使用自定义指令来解决一个开发过程中的实际需求：按钮权限管理。

2. 分析

在管理系统中，不可避免的需要有权限管理模块。权限的划分可大可小。对于前端页面来讲，大一点的权限如菜单权限，小一点的如按钮权限。

菜单权限的话我们可以在后端返回的菜单数据上做处理，后端处理时只将当前用户有权限的菜单数据返给前端即可，前端按数据渲染菜单即可。

按钮权限的话，在 Spring MVC + Freemarker 中，我们可以在返回 View 时，将当前用户拥有的按钮编码直接设置到 model 中，在 Freemarker 中控制按钮是否渲染。这种前后端不分离的情况下，处理按钮权限的过程比较简单。

在当今流行的前后端分离的架构中，视图的渲染不再是由 Spring MVC 中的 view 控制，而是由前端的单页应用来管理。前后端通过 http 协议进行 json 格式的数据交互。此时，对于按钮权限的需要在前端去控制。

3. 实现

对于前后端分离架构下的按钮权限控制，一个简单的实现思路就是：

❝

单页应用加载时，一次性将当前用户拥有的按钮权限加载到前端并缓存起来。页面切换时，每一个页面单独处理自己页面内的按钮的显隐。

❞

如果在每个页面都写处理逻辑的话，可能重复工作量就比较多。

我们可以将处理逻辑封装到自定义指令中，在需要权限管理的按钮上增加自定义指令及按钮对应的唯一编码即可。

自定义指令:

// 注册一个全局自定义指令 `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」 按钮编码，则说明用户有该按钮权限，页面将显示该按钮，否则不对其进行渲染。

4. 总结

当然，我们还需要一个从后端请求当前用户拥有的所有按钮编码的过程，并将按钮编码通过 逗号“，”拼接，存储在 「localStorage」 的 「BTN_AUTHS」 对象中。