1.登录成功后,调用状态管理中对应的设置菜单的方法
//调用store中的setMenu函数
this.$store.commit('setMenu',data.data.data)
2.将后端返回的菜单数据存入Cookie中
//设置菜单的方法setMenu(state, val) {state.menu = valCookie.set("menu", JSON.stringify(val))},
3.在对应的侧边框组件中获取菜单数据,并通过循环遍历将其显示到页面
menuData(){//Cookie中有则获取,否则从store获取(store中的数据不具备持久化,刷新页面会消失)if(Cookie.get("menu")!=undefined){return JSON.parse(Cookie.get("menu"))}else{return this.$store.state.tab.menu}}
注意:此时虽然可以实现用户权限控制的菜单显示,但仍可以通过url访问不属于自己权限的页面(这需要通过动态路由技术实现)