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

Posted tsxylhs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue多页面 按钮级别权限控制 directive指令控制相关的知识,希望对你有一定的参考价值。

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

项目结构如下:

技术图片

修改router.js

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

新建文件 btnPermission.js文件

内容如下

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>

 

大功告成

 

以上是关于Vue多页面 按钮级别权限控制 directive指令控制的主要内容,如果未能解决你的问题,请参考以下文章

vueconfirm如何控制按钮

vue 按钮 权限控制

Vue自定义指令 directive

「Vue面试题」vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

面试官:Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?

vue无缝滚动插件左右切换按钮不显示