Vue按钮权限控制实践

最新推荐文章于 2024-07-29 11:45:48 发布

YouluBank

最新推荐文章于 2024-07-29 11:45:48 发布

阅读量1k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/m0_37787662/article/details/111887504

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

上篇是Vue菜单权限的控制，这篇讲一下按钮权限的控制，主要运用了directive自定义指令来实现

最终实现如下这样的效果：

实现代码如下：

1、修改store/modules/permission.js ，获取菜单时并获取按钮列表，并缓存到store

const actions = {
  generateRoutes({commit}) {
    return new Promise(resolve => {
      getUserMenu().then(response => {
        let asyncBtns = []
        let btnArr = response.data.object.btnList
        generaBtn(asyncBtns, btnArr)
        console.log(asyncRoutes)
        commit('SET_BTNROLES', asyncBtns)
        resolve(asyncRoutes)
      })
    })
  }
}

2、在store/getters.js，声明可引用的按钮别名

3、在directive新建btnPermission/index.js，自定义按钮权限指令

import store from '@/store'

export default {
  btnHas: {
    inserted(el, binding) {
      if(!store.getters.btnRoles.includes(binding.value)){
        if(!!window.ActiveXObject || 'ActiveXObject' in window){
          el.parentNode.removeChild(el);
        }else{
          el.remove();
        }
      }
    }
  }
}

4、在需要控制按钮权限的页面引用指令，如：

<el-button v-btnHas="'taskInboundSearch'" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
<el-button v-btnHas="'taskInboundRest'" class="filter-item" type="primary" icon="el-icon-refresh" @click="restFrom">重置</el-button>

注意指令里面的按钮名称应该和后台返回的按钮数组对应，否则是不显示的

-_-如果有其他更好的方式，欢迎下方留言-_-