基于vue 动态菜单 刷新空白问题的解决

// 尝试获取本地 store 用户信息中权限字段
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// 用token换取用户信息
store.dispatch(‘user/getInfo’).then(roles => {
if (!roles) new Error(‘roles error!’)
// 根据获取的用户权限映射对应的路由信息
store.dispatch(‘permission/generateRoutes’, roles).then(accessRoutes => {
if (!accessRoutes) new Error(‘accessRoutes error!’)
// 动态加入路由
router.addRoutes(accessRoutes)
// 确保路由完整性，设置replace 为true 这样导航就不会留下历史记录。
next({
…to,
replace: true
})
})
})
} catch (error) {
// 删除本地token 并且重新登陆
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘Has Error’)
next(/login?redirect=${to.path})
NProgress.done()
}
}