基于admin-template模板，实现按钮权限管理

Posted 2021-12-31 捡黄金的少年

1、创建一个directive文件夹，采用Vue.directive对vue页面节点进行管理

2、创建permission.js，导出一个对象

（1）采用 buttonList.some进行条件过滤。没有使用foreach，询数组中唯一的元素, 用some方法更合适，当查找到相同，后会跳出当前循环，不会再执行内容。（这样就可以节约资源，找到内容了后就不再找了）

（2)、采用 el.parentNode.removeChild(el)移除vue中的节点

  (3)、VueX中状态管理getters的存储的buttonList，buttonList，每个用户按钮权限不同，所以后台返回存储的buttonList也不同。

"buttonList": [
      "article:search",
      "article:audit",
      "article:edit",
      "article:delete",
      "category:search",
      "category:add",
      "category:edit",
      "category:detele",
      "label:search",
      "label:add",
      "label:delete",
      "label:edit",
      "advert:search",
      "advert:add",
      "advert:edit",
      "advert:delete",
      "user:search",
      "user:add",
      "user:edit",
      "user:delete",
      "user:role",
      "user:password",
      "role:search",
      "role:add",
      "role:edit",
      "role:delete",
      "role:permission",
      "menu:search",
      "menu:add",
      "menu:edit",
      "menu:delete"
    ],

//自定义权限指令
import store from '@/store/index'
// 导出一个对象
export default 
    // 指令钩子
    inserted(el, binding) 
        //el 指令作用到哪个元素上
        //获取使用指令时传递的值
        const  value  = binding
        //获取用户当前所拥有的按钮权限
        const buttonList = store.getters && store.getters.buttonList
        if (value) 
            // 用some，不用foreach 因为如果下面为true，则进行终止循环
            const hasPermission = buttonList.some(button => 
                return button === value
            )
            // 如果没有权限，则将元素移除
            if (!hasPermission) 
                el.parentNode && el.parentNode.removeChild(el)
            
        else
            throw new Error("需要权限标识！比如v-permission='article:delete'")
        


    

3、创建index.js，使用 Vue.directive()   全局自定义指令的创建，引入permission.js导出的对象，对元素进行管理.

// 引入所有要注册的全局指令
import permission from './permission'
// 将permission文件导出的对象引入
export default (Vue) => 
    // 第一个参数为指令名称，v-permission 使用，
    // 注意在生命指令名时候，不能加v-
    Vue.directive('permission', permission)

// 然后在main.js 中全局引入这个文件

4、全局引入directIve下面的index.js文件

import directive from '@/directive'//导入自定义指令
Vue.use(directive)

5、按钮上使用，使用 v-permission="'article:delete'"对权限的绑定

<el-button
          v-permission="'article:delete'"
            size="mini"
            v-if="scope.row.status !== 0"
            @click="handleDelete(scope.row.id)"
            type="danger"
            >删除</el-button
          >