按钮权限

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

解决思路：

之前的解决思路：

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

新解决方法：

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

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

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

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

l　　　　　　let userInfo = {};

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

13               if (entity.name == childrenName) {

　　　　　　　　　　　　this._clearAllCookies()

14                 console.log(entity,'entity');
15                 Cookies.set(CookiesName, entity);
16 
17               }
18             }
19           )
20         }
21       })
22     })
23   },
24 }

_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;

}

 1     页面中使用

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

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

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