Vue多页面 按钮级别权限控制 directive指令控制

利用driective 构建自己的指令，实现按钮级别权限

项目结构如下：

修改router.js

    {
        path: 'schools',
        name: '列表',
        component: () => import('./eduAdministration/SchoolList'),
        meta: {
          permissions: ['schools'],
          btnpermissions:['admin','test'],
          title: '列表',
          icon: '',
          scrollToTop: true
        }
      },

新建文件 btnPermission.js文件,注意需要将权限roles登录时灌入缓存

 

内容如下

import Vue from 'vue'
import store from '../index'
/**权限指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    // 获取按钮权限
    let Permissions = vnode.context.$route.meta.btnpermissions;
    console.log('permission',Permissions)
    if (!Vue.prototype.$_has(Permissions)) {
      let className=el.getAttribute("class")
      className=className.concat(" hidden")
      el.setAttribute("class",className)
    }
  }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
   debugger
  let PermissionsStr =store.getters.roles;
  if (PermissionsStr == undefined || PermissionsStr == null) {
    return false;
  }

  PermissionsStr.forEach((per)=>{
    if (value.indexOf(per) > -1) {
      isExist = true;
    }
  })
  return isExist;
};
export {has}

将文件引入index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import permission from './modules/permission'
import has from './modules/btnPermission'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
  getters
})

export default store

页面添加权限

     el-button(size='mini' @click="handleEdit(scope.row)" v-has) 编辑

最后一步

在 css中添加hidden样式

<style scoped>
  .hidden {
    display:none;
  }
</style>

 

大功告成