如何在vue中实现按钮级别的权限控制

如何在vue中实现按钮级别的权限控制

在vuex中

const state = {
  routes: [],
  addRoutes: [],
  permissionList:[]
}

const mutations = {

  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
    // asyncRoutes = asyncRoutes.concat(routes)
    addRoutes(routes)
  },
  SET_PERMS: (state, permissionList) => {
    state.permissionList = permissionList
    // asyncRoutes = asyncRoutes.concat(routes)
  }
}

login时候调用

//设置权限
          GetPermissionesList().then(res=>{
            console.log(res)
            store.commit('permission/SET_PERMS', res.data)
          })

创建文件定义指令

import Vue from 'vue'
import store from '../store/index'
/**权限指令**/

Vue.directive('has', {
    bind: function(el, binding) {
     if (!Vue.prototype.$_has(binding.value)) {
        el.style.display = "none"
     }
    }
   });
   //权限检查方法
Vue.prototype.$_has = function(value) {

    var arr = JSON.parse(JSON.stringify(store.state.permission.permissionList))
    let isExist = false;
    arr.forEach(item => {
        if(item == value){
            isExist=true;
        }
    });
    return isExist;
};

具体页面使用指令

<el-button v-has="'sys:withdraw:export'" 
type="primary" size="small">导出EXCEL</el-button>

大功告成