按钮权限管理

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

一。按钮权限

按钮权限可以使用v-if和自定时指令来进行实现，但是如果按钮很多，每一个按钮都需要用v-if来进行判断就很麻烦，影响效率，但是通过自定义指令我们只要在需要进行权限管理的元素上绑定自定义指令，通过自定义指令来进行权限操作就会方便很多

需要先引入vue

    import Vue from "vue";
    

  用户权限管理数据
    let user = [
     {
name: "超管1",
         roleId: 1,
   },
       {
name: "超管2",
roleId: 2,
 },
 {
name: "超管3",
roleId: 3,
 },
  ];
  当前用户登陆成功之后储存在本地的数据，数据里包含用户权限
 let userinfo =      JSON.parse(localStorage.getItem("userInfo")).Useranme;
  console.log(userinfo);
  
  
  
  

  

注册自定义指令需要使用Vue.directive，第一个参数为指令名称，不需要设置为v-，使用的时候直接用v-指令名就可以了 el代表的是使用指令的dom元素，可以对dom元素进行操作

Vue.directive("add", function (el, bl) {

使用findIndex查找用户数据里有没有roleId和当前登录用户权限相等的，如果等于——1就代表不存在，不存在的话就可以把当前按钮隐藏，这样的话用户就无法操作当前按钮，实现了按钮权限
let index = user.findIndex((r) => r.roleId == userinfo);
console.log(index, 88);
 if (index == -1) {
el.style.display = "none";
  } else {
  el.innerHTML = userinfo;
  }
  }   );
  

 <el-card style="margin-top: 20px">
    <h1>权限管理</h1>
    <ul>
    v-add就是上面所设置的自定义指令，给元素添加v-add就可以获取到dom元素,从而实现对按钮的权限控制
      <li v-add>
        <el-button type="primary" >添加</el-button>
      </li>
      <li>
        <el-button type="primary" >修改</el-button>
      </li>
      <li>
        <el-button type="primary">删除</el-button>
      </li>
      <li>
        <el-button type="primary">编辑</el-button>
      </li>
      <li>
        <el-button type="primary">取消</el-button>
      </li>
    </ul>
  </el-card>