1.解决登录成功跳转到主界面有时主界面菜单列表不显示问题
1.原因分析:在登陆进入主页面时,动态权限菜单并未获取到,导致无法显示。
2.解决问题:
方法一:在跳转到主页面时,对跳转的代码设置定时器
setTimeout(() => { this.$router.push({path: '/home'}) }, 2000);
方法二:将接受的动态权限菜单的改为computed计算属性接收
computed: { menuList() { // 动态路由权限列表 return this.$store.getters['menu/menu'] }, },
方法三:使用promise对象在请求菜单权限接口完成,并动态添加路由后再跳转到主页面
// 登录: // 电泳动态权限菜单并动态创建路由的方法 this.$store.dispatch('menu/save_menu', resultInfo.role_id).then(() => { ElMessage.success('登录成功') this.$router.push({path: '/home'}) }) // store中的方法,获取动态权限菜单并动态创建路由 actions: { save_menu({commit}, roleId) { // roleId 角色id // 解决办法:返回一个promise对象 return new Promise(async (resolve, reject) => { const data = await RquestSystemMenus(roleId) // roleId 角色id const { resultCode, resultInfo } = data if(resultCode === 1) { const menulist = useMenu(resultInfo) // 使用路由的实例(router)的addRoute动态添加路由,参数一:要添加的路由记录 menulist.forEach(route => router.addRoute(route)) commit('SAVE_MENU', menulist) resolve() } else { ElMessage.error(resultInfo) reject() } }) } },
2.页面刷新白屏问题或找路由404页面问题原因分析?
1.由于刷新页面,页面重新加载(重新加载整个程序),从入口文件main.js和根组件App.vue执行,路由会被初始化,初始化后动态添加的路由会丢失。导致无法找到动态添加的路由,从而出现白屏和404页面问题
2.路由对应的组件是动态添加的 router.addRoute(route) ,在登录成功时获取权限菜单格式化后动态添加
3.虽然我们将权限菜单的数据保存到store,并做了持久化存储到localStorage,但是对象是不能持久化存储的会报错,component组件对象刷新界面后丢失
3.解决办法:
登录时保存角色的id
方法一:在App.vue组件中再次动态请求权限菜单接口,动态添加路由,再次跳转当前路由。注意:在路由跳转时,因为接口是异步的,同时执行代码的话会导致路由跳转时动态路由并未添加,还会出现白屏问题。解决办法:在接口的回调中跳转(不推荐),推荐方法:返回一个promise对象,在then方法中跳转路由
方法二:在全局路由导航中,对所有路由进行拦截,再次动态请求权限菜单接口,动态添加路由,再次跳转当前路由(不推荐,在接口未响应的这段时间,全局前置路由可能有拦截多次,导致再次请求权限菜单接口)
方法一:
方法二: