结合vuex设置按钮权限

自定义一个permission指令，路径：src/plugins/permission.js

import store from '@/store';

const directives = {
  permission: {
    inserted(el,bindling){
      // bindling.value为指令的绑定值
      let perVal = bindling.value;
      if(bindling.value) {
        // 登录时获取该登录用户的按钮权限 pers
        // console.log(store.state.permissionList)
        let pers = store.state.permissionList;
        // hasPer为true为有权限 hasPer为false为无权限
        let hasPer = pers.some(item=>{
            return item == perVal
        });
        // 没有权限就隐藏此元素
        if(!hasPer){
            el.style.display="none"
        }
      }
    }
  }
}

// 注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
  install(Vue) {
    Object.keys(directives).forEach(key=>{
      Vue.directive(key,directives[key])
    })
  }
}

main.js：

// 权限
import Permission from './plugins/permission';
Vue.use(Permission);

getPermissionsApi().then(response => {
    // 将权限存储到vuex里
    store.commit('setPermissionList', ['add', 'edit', 'delete'])
})

代码中使用指令：

<el-button v-permission="'add'">添加</el-button>
<el-button v-permission="'edit'">编辑</el-button>
<el-button v-permission="'delete'">删除</el-button>

如果接口返回该用户有权限，则会显示对应button。