参考文章 https://blog.csdn.net/linzhefeng89/article/details/94594534
调用栈 main.vue
computed: { ... menuList() { return this.$store.getters.menuList; }, ... }user.js
menuList(state, getters, rootState){ return getLoginMenuList(router, rootState.user.access); },依赖util.js
/** * 获取当前登陆的用户的权限集合数据 * @param list {Array} 所有的路由集合数据 * @param access {Array} 当前允许登陆的路由集合数据 */ export const getLoginMenuList = (list, access) =>{ let res = []; forEach(list, item => { if (!item.meta || (item.meta && !item.meta.hideInMenu)) { //item 路由节点信息 let obj = { icon: (item.meta && item.meta.icon) || '', name: item.name, meta: item.meta, code: item.code, path: item.path }; //判断当前路由是否存在子路由 并且当前用户拥有该节点权限 if(hasChild(item)&&showThisMenuEle(item,access)){ //子路由递归调用自身，加入路由节点children对象属性 obj.children = getLoginMenuList(item.children, access); } //判断用户当前权限是否符合，进入对象 if (showThisMenuEle(item, access)) res.push(obj); } }) return res; }; const showThisMenuEle = (item, access) => { //code为路由节点标识，该标识唯一 用于对比用户权限是否拥有该菜单 let code = item.meta.code; if(access.indexOf(code)!=-1){ return true; }else{ return false; } } export const hasChild = (item) => { //判断该菜单是否有子菜单 return item.children !=undefined && item.children.length !== 0 };