最近在做按钮权限， 跟后台商定，将权限和路由是绑定在一起的。 具体效果如下：
解决思路：
之前的解决思路：
点击左侧菜单，存储全部权限，每次点击单个时候，去计算获取当前页面的按钮权限。后发现有一个恶心的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 => { 13 if (entity.name == childrenName) { 14 console.log(entity,‘entity‘); 15 Cookies.set(CookiesName, entity); 16 17 } 18 } 19 ) 20 } 21 }) 22 }) 23 }, 24 }
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>
原文：https://www.cnblogs.com/0520euv/p/12512070.html