VUE3.2 按钮权限控制

最新推荐文章于 2024-03-08 21:27:28 发布

harveymomo

最新推荐文章于 2024-03-08 21:27:28 发布

阅读量513

点赞数 1

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/liuzhang6966/article/details/127730023

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.登录存入localStorage

  localStorage.setItem('buttonList', JSON.stringify(res.data.menuList));

后台数据格式：

[
    {
        "checked":false,
        "component":"",
        "createTime":"2022-11-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":"搜索",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":"测试页",
        "perms":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2022-11-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

2.前端

/utils/ 目录下新增hasPermission.js

export const hasPermission = {
  install(Vue) {
      //自定义指令v-has：
      Vue.directive('has', {
          mounted(el, binding, vnode) {
              console.log("binding")
              console.log(binding.value)
               if (!checkPermission(binding.value)) {
                el.parentNode && el.parentNode.removeChild(el)
               }
            },
      });
      //权限检查方法
      function checkPermission(value) {
           /** 存放value值 */
           const btn_permission = value;
          let userlogin =  JSON.parse(localStorage.getItem("buttonList") || "[]");
        //  console.log(localStorage.getItem("buttonList"))
          //判断是否按钮有权限
          var hasPermissions = userlogin.some(permission => {
               return btn_permission == permission.perms
             })
          return hasPermissions;
      }
  }
};
export default hasPermission;

3.main.js 增加以下行：

import { hasPermission } from './utils/hasPermission.js'

后面增加这个
app..use(hasPermission);

4.页面应用：

  <el-form-item>
        <el-button v-has="['sys:role:search']"   type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button  v-has="['sys:role:reset']"  icon="Refresh" @click="resetQuery">重置</el-button>
 </el-form-item>