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.metaconsole.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>
