按钮权限

最近在做按钮权限，  跟后台商定，将权限和路由是绑定在一起的。  具体效果如下：

 

 

 

 

 

解决思路：

之前的解决思路：

　　点击左侧菜单，存储全部权限，每次点击单个时候，去计算获取当前页面的按钮权限。后发现有一个恶心的bug，就是切换页签的时候，按钮会被下一个覆盖

新解决方法：

　　1、在需要处理按钮权限的地方，传入当前页面的  主标题、子标题、 Cookie名称，然后每次去路由里面进行匹配 

　　2、有个需要注意的地方，请求路由是异步的， 所以要处理成同步才行，不然得到的值是undefined

　　3、 每次离开的时候，在destroyed中移除Cookie，避免Cookies存储过大。

抽取成公共的JS代码
   import API from "../api/api_user"
import Cookies from "js-cookie";
export default {
    changeRoutersCookie: async  function (titleName, childrenName, CookiesName) {
    await  API.router().then(result => {
      let menus = [];
      menus = result.router;
      menus.forEach(item => {
        if (item.name == titleName) {
          let clist = item.children;
           // console.log(clist);
          clist.forEach(entity => {

 l　　　　　    　let userInfo = {};

                userInfo =  JSON.parse(Cookies.get("userInfo"))

              if (entity.name == childrenName) {

　　　　　　　　　　　　this._clearAllCookies()

                console.log(entity,'entity');
                Cookies.set(CookiesName, entity);

              }
            }
          )
        }
      })
    })
  },
}

  _clearAllCookies(){

    let cookies = document.cookie.split(";");

    for (let i = 0; i < cookies.length; i++) {

      let cookie = cookies[i];

      let eqPos = cookie.indexOf("=");

      let name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;

      document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

    }

    if(cookies.length > 0)

    {

      for (let i = 0; i < cookies.length; i++) {

        let cookie = cookies[i];

        let eqPos = cookie.indexOf("=");

        let name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;

        let domain = location.host.substr(location.host.indexOf('.'));

        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;

      }

    }

  },

 

    页面中使用

　　　　//权限按钮
    async _getCookie(){
      await changeRoutersCookie.changeRoutersCookie("证照管理", "委托书",'proxyList')
      this.RouterPower = JSON.parse(Cookies.get("proxyList"));
      // console.log(this.RouterPower,1221321213);
      if (this.RouterPower.children == null || this.RouterPower.children.length <= 0) {
        return;
      } else {
        // 过滤掉数组中的：编辑、删除、修改密码,因为表格上会出现，但是现在移动到了表格中。
        this.resultAry = this.RouterPower.children;
        this.resultAry.filter(item => {
          if (item.name != "查看") {
            this.newAry.push(item)
          }
        });
        //判断表格中的按钮是否包含在数组中
        this.resultAry.map(item => {
          this.filterNewAry.push(item.name)
        })
      }
      ;
    }

　　destroyed(){
  Cookies.remove("proxyList")
}

<el-button @click="handleClick(scope.row)" 
　　　　　　 type="primary" 
　　　　　　 size="mini"
           v-if="filterNewAry.indexOf('查看') != -1"
           plain>查看
</el-button>