按钮控制：vue，根据用户权限，控制按钮的显示和隐藏

1、登录成功后，后端返回的数据格式

{

    "code": 100,

    "msg": "登录成功",

    "role": 1,

    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NzI3NDkzLCJlbWFpbCI6IiJ9.9cBPqkkTxXS2aAjwRadcWuQLc5wgHdAG_YeRc82hGz0",

    "data": {

        "username": "admin",

        "icon": "/media/icon/avatar09.jpg/",

        "get_position": "系统管理员",

        "role": 1

    },

    "right": [

        {

            "id": 1,

            "authName": "用户管理",

            "icon": "el-icon-user-solid",

            "children": [

                {

                    "id": 1,

                    "authName": "创建用户",

                    "path": "createuser",

                    "right": "add",

                    "component": "createuser"

                }

            ]

        },

        {

            "id": 2,

            "authName": "部门管理",

            "icon": "el-icon-user-solid",

            "children": [

                {

                    "id": 2,

                    "authName": "创建部门",

                    "path": "createpart",

                    "right": "add", //这里就是控制按钮的功能

                    "component": "createpart"

                }

            ]

        },

    ]

}

2、在main.js中，自定义指令permission

Vue.directive('permission', {
  inserted:function (el, binding) {
    //拿到el-button这个按钮标签
    //拿到v-permission自定义指令中{action:'add'}
    const action = binding.value.action		//action就拿到v-permission中的action对应的值.
    //判断,当前的路由所对应的组件中,如何判断用户是否具备action的权限,currentRoute拿到当前组件的路由规则
    console.log(router.currentRoute)
    console.log('ssssss')
    const currentRight = router.currentRoute.meta
    console.log(currentRight)
    let cur_list = [currentRight]
    console.log(cur_list)
    if (cur_list.indexOf(action) === -1) {
      //删除el元素
      el.parentNode.removeChild(el)
      //禁用元素
      // el.disabled = true
      // el.classList.add('is-disabled')
    }

  }

})

解释：cur_list.indexOf(action)
cur_list是用户在这个路由中能使用的权限
action:是在使用自定义指令时，传递的数据，如果cur_list有相应的权限，就显示，反之就删除掉。这样就看到不按钮了。

3、在组件中使用自定义指令

<button v-permission="{action:'delete'}">测试</button>