快速实现按钮权限控制

如题，这里分享一个简单好用的方法，废话不多说直接上干货

1.在组件目录下新建一个has.js

//获取本地登录数据
let findData = (data) => {
  let loginModules = JSON.parse(localStorage.getItem("PDmodules"));
  let isHave = loginModules.includes(data);
  // console.log(isHave, loginModules);
  return isHave;
};

export default findData;

(这里说下我存储的PDmodules格式，类似下方代码)

//PDmodules
['ddgl','ddtj','qxgl','gffj']
然后includes函数就是在数组中查找是否有这项，有的话会返回true，然后结合v-if就可以完成控制隐藏的效果

2.当然我这样写PDmodules是在登陆的时候已经把后端返回的按钮权限数组给存储下来了
这里是提供一个解决思路，然后在main.js里引入 (代码简陋，萌新一个，大佬勿喷哈)

// 引入权限判断
import has from "@/utils/has.js";
Vue.prototype.$has = has;

3. 代码里实现（主要是通过v-if配合封装的指令来进行操控显示隐藏）

           <div
              v-if="$has('gffj')"
              class="home-item"
              @click="jumpTo('/clothingSortOut', '/RFIDclothingSortOut')"
             
            >
              <div class="item-logo-box">
                <img
                  class="item-logo"
                  src="../../assets/img/home/clothingSortOut.png"
                  alt=""
                />
              </div>
              <h2 class="item-title">工服分拣</h2>
            </div>

最后的最后，看到这里觉得有用可以点个赞～ 也欢迎大家互相讨论