1.登录成功后,调用状态管理中对应的设置菜单的方法
//调用store中的setMenu函数
this.$store.commit('setMenu',data.data.data)
2.将后端返回的菜单数据存入Cookie中
//设置菜单的方法
setMenu(state, val) {
state.menu = val
Cookie.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访问不属于自己权限的页面(这需要通过动态路由技术实现)