vue权限细粒化控制

laoli815

于 2022-02-25 15:09:43 发布

阅读量503

点赞数 1

分类专栏： VUE Django自动化文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/laoli815/article/details/123133053

版权

Django自动化同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

本文介绍了一种在前端页面实现权限控制的方法，通过在main.js中注册全局指令，根据用户权限动态显示或隐藏功能按钮。在商品管理组件中，利用v-has指令结合Vuex状态管理，根据用户权限列表决定编辑和删除按钮是否展示。这种方案允许在后端角色权限配置改变时，前端无需代码修改即可响应变化。

摘要由CSDN通过智能技术生成

前端页面加载中，在一个组件页面，我们都会把该页面所有功能全部代码体现出来，但是这样有个问题，权限大的用户，可以点击相关功能的用户都没问题，但是没有权限或者根本用不到该功能的用户，就没有必要展示了，也不能展示，一旦误操作就会产生一定的影响。这时候前端应该根据用户拥有的权限进行
我的实现方法是在main.js中注册一个全局指令

Vue.directive('has',{
  inserted(el,bindings,vnode){
      if(!store.state.permission.btnlist.includes(bindings.value)){
        el.parentNode.removeChild(el)
      }
  }

}
)

每个组件都可使用该指令
我们的商品组件模块
在这里插入图片描述
GoodsManager.vue代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        v-for="(item,i) in tableCol"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      ></el-table-column>
       <el-table-column label="操作" v-if="showOper">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)" v-has="'00013'">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)" v-has="'00012'">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {GoodsList,GoodsDetail,GoodsAdd,GoodsDel,GoodsPut} from '@/api/goods'
export default {
  name: "GoodsManager",
  data() {
    return {
      tableData:null,
      tableCol: [
        { prop: "id", label: "ID" },
        { prop: "name", label: "商品名称", width: 180 },
        { prop: "code", label: "商品编码", width: 200 },
        { prop: "area", label: "产地" },
        { prop: "description", label: "描述" },
        { prop: "img", label: "图片" },
        { prop: "price", label: "价格" }
      ]
    };
  },
  computed:{
    showOper(){
      var allowbtnList= this.$store.state.permission.btnlist
      var pagebtnlist=['00012','00013']
      var duplicatedValues = allowbtnList.filter(
      item => pagebtnlist.includes(item)
        ); 
      return duplicatedValues.length>0
    }
  },
  methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      async getGoods(){
       let res= await GoodsList()
       console.log(res)
       this.tableData=res
      }
  },
  created(){
    this.getGoods()
  }
};
</script>
<style lang="css" scoped>
</style>

index.vue代码：

<template>
  <router-view></router-view>
</template>

<script>
export default {

}
</script>

<style>

</style>

mysql数据库中这个菜单相关值：

在这里插入图片描述
根据code的代码值进行判断，用户有这个code按钮就会显示如果没有就不会显示，下图是超级用户权限展示，编辑删除功能都具备

这个是整个页面的显示情况
在django-admin后台设置角色权限

admin2用户给予这个角色
在这里插入图片描述
只有编辑权限了,代码功能生效了，同样的给与删除权限也一样，前端代码不需要修改，只需要在后台修改用户角色或者角色权限就实现了按钮和功能的细粒化