阅读Vue文档知道可以自定义插件和指令后便跃跃欲试，但一直没有尝试。最近项目进度压力不大，便尝试着使用Vue自定义插件和指令将项目权限校验部分进行了重构。
首先是包装用户权限检测的功能。思路非常简单，就是在用户的权限数据中进行检测指定的角色或权限，检测到了则说明有权限，否则说明没有权限。用户的权限数据由Role和Permission数组组成，在权限机制初始化的时候提供，也可以提供返回它们的函数。初始化如下：
1Vue.use(Authorization, {
2 authorization (context) {
3 let roles = []
4 let permissions = []
5 ......
6 return {roles, permissions}
7 },
8 options: {
9 context: ......
10 }
11})
12 其次是实现自定义的指令auth，使用后如果有权限则渲染后出指令所在的元素，否则忽略掉指令所在元素。
1 Vue.directive('auth', {
2 bind: function (el, binding) {
3 let checkFunction = _authorization.hasPermission
4 if (binding.arg === 'role') {
5 checkFunction = _authorization.hasRole
6 }
7 if (!binding.arg && binding.arg !== '' && binding.arg !== 'permission') {
8 throw new Error('指令参数错误')
9 }
10 if (!checkFunction(binding.value)) {
11 el.parentNode.removeChild(el)
12 }
13 }
14 })
15使用方式如下：
1 <div v-auth:role="aRole">
2 ......
3 </div>
4
5 <!--或-->
6 <div v-auth:permission="aPermission">
7 ......
8 </div>
9
10 <!--或-->
11 <div v-auth="aPermission">
12 ......
13 </div>