Vue~添加按钮权限~通过自定义指令

1、需求

客户：需要把导入、删除权限化；指定人员有权限；

2、思路

后台有一个接口，是可以查询到当前登录人的权限；

前端方案：

1、每到一个页面就请求一次接口是否有权限；（太麻烦了）

2、自定义指令 · Vue.directive；（一次请求，一直用）

3、代码实现

1、自定义指令

创建 /directive/permission/hasPermi 文件

//用来获取权限数据
import store from '@/store'

export default {

  inserted(el, binding, vnode) {
    //获取绑定值
    const { value } = binding
    // TODO 匹配规则，在页面写的要对应这个匹配规则
    const all_permission = "*:*:*";
    //获取用户权限数据
    const permissions = store.getters && store.getters.permissions 
if (value && value instanceof Array && value.length > 0) { 
      //权限标志
      const permissionFlag = value
      //判断用户是否有此权限
      const hasPermissions = permissions.some(permission => {
        console.log('permission', permission);
  return all_permission === permission || permissionFlag.includes(permission)
      })
      
      //没有权限-移除页面上的控件
      if (!hasPermissions) {{
        console.log('没有权限-移除');
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else { 
      el.parentNode && el.parentNode.removeChild(el)
      throw new Error(`请设置数组操作权限`)
    }
  }
}
 

2、注册指令

创建 /directive/permission/index文件

import hasPermi from './hasPermi'
import Vue from "vue"


const install = function (Vue) {
  Vue.directive('hasPermi', hasPermi)
}


if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install);
}

export default install

3、在main.js里面进行全局注册

import permission from './directive/permission'


Vue.use(permission)

vue官网对指令的解释https://cn.vuejs.org/v2/guide/custom-directive.html

4、使用方法

      <button
           v-has-permi="['btn:pre:del']"
           style="margin-top: 4px"/>


   <button
           v-has-permi="['btn:pre:export']"
           style="margin-top: 4px"/>