Vue + TS + directive + store 完成项目按钮权限控制

今天遇到按钮权限控制这个需求，像往常一样，百度一哈：第一种：写个全局方法，然后每个地方用（略显low），作为一个优秀的社会主义接班人是不允许自己写出这么菜鸡的代码的 ，于是我选择第二种方法： 用Vue的directive来完成这个任务：

首先，我们先看看官网上对于指令的例子：

官网例子

我用ts实现这个指令：

ts实现

接下来进入我们解决我们的需求：

我们先用store去存储后台返回的按钮权限列表： 用字典（key: value）的这样数据结构来存；在指令中的vnode中，我们可以获取到当前路由各种属性，我使用的是路由的title做为标识；这样拿到对应位置的按钮权限列表

数据例子

然后进行我们指令的编写：假设有十个页面 每个页面上有十条数据，每条数据有两个按钮，就需要有200次操作，所以指令这边不能放太多的复杂逻辑；同样，每次从store里面获取数据也是一个耗费时间和性能的操作；所以就产生了如下代码(在main.ts 添加指令)：

main.ts

同时在按钮上添加key值和v-has指令，就可以做到按钮级别权限控制 ： 

按钮权限控制

其中有一个地方遇到了坑：就是在最开始时，我使用的是bind方式，于是在最后移除节点的时候，el.parentNode为null，就会报错，查阅文档才找到原因：原来是对应的钩子函数使用的不对，无法获取到el.parentNode；改用inserted后，正常使用；

vue-directive 钩子函数

有这么多钩子函数，也能让指令适用于更多的场景之中，这也是我第一次写指令，感觉很棒，产生了很多新的想法；