问题描述:
由于系统需要动态注入路由,刚开始在路由拦截里面根据账号权限动态获取路由,然后注入到本地路由中,代码如下:
// 尝试获取本地 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() } }
这样写只有在登陆之后刷新页面才会动态注入,解决办法就是在登陆之后执行一下 红色字体部分代码