vue-router之解决addRoutes使用遇到的坑


Posted in Javascript onJuly 19, 2020

最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下。

场景复现:

做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是:

前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之后,后端返回当前用户的权限表,前端根据这个权限表遍历前端路由表,动态生成用户权限路由,然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中,整个过程大致如下:

// router.js 文件
 
// 需要用户权限的路由表
const appRoutes = [
 {
 path: '/dashboard',
 name: 'dashboard',
 component: () => import('...'),
 children: [
 RouteConfig1, 
  RouteConfig2, 
  ...
 ]
 },
 RouteConfig,
 ...
];
 
// 不需要用户权限的路由表
const constantRoutes = [
 {
 path: '/login',
 name: 'login',
 component: Login
 },
 {
 path: '/register',
 name: 'register',
 component: Register
 },
 ...
]
 
// 初始化路由的时候,只挂载不需要用户权限的路由表
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 constantRoutes
});
 
/** 
 * 
 * 假如后端返回的数据格式如下: 
 * 
 * {
 * status: 200,
 * message: 'successful',
 * data: {
 *  user: {...},
 *  token: '...',
 *  permisssion: [...]
 * }
 * }
 * 
 * login.vue
 */
axios.post('/user/login',{username,password})
 .then(res => {
 if (res.status === 200) {
   // 如果登录成功,则需要遍历生成用户权限路由
  // filterRoutes根据permission和router.js中定义的appRoutes生成动态路由表
   const routes = filterRoutes(permission);
   
   // 然后使用addRoutes将routes挂载到router中
   router.addRoutes(routes);
  } else {
   ...
  }
 })
  .catch(error => { ... })

写到这里,貌似动态生成路由的功能就好了,一切都perfect了,但问题紧接着就来了,当用户登录之后,我们点击页面上的退出按钮退出当前登录,然后重新登录,会发现浏览器console面板紧接着就报如下错误:

纳尼(⊙o⊙)?这是怎么回事呢,第二次登录也正常登录了,功能上似乎没有什么问题,但这个警告从哪里来的呢?对于一个重度强迫症患者来说,任何警告和报错都是不允许出现的,哪怕功能上没什么问题。

捋一捋

这段警告的意思是说,以上的这几个路由命名重复,存在多个name相同的路由。那么为什么会有多个路由名称相同的路由呢?

让我们从头捋一下这个错误是怎么来的。首先第一次打开网站登录的时候是没有问题的,只有当我们退出登录,重新登录的时候,这段警告就来了。并且如果我们在重复登录之前刷新一下浏览器然后再登录,这种警告就不会出现了,很神奇是不是?

分析一下上面的情景:首先这个警告只会在用户重新登录的时候出现,登录的时候我们做的唯一跟路由相关的事情就是动态添加路由,所以问题肯定出在 router.addRoutes(routes)这里,其次这里又分了两种情况:有刷新和无刷新。在无刷新的情况下会报这个警告,有刷新就不会报这个警告。那么有刷新和无刷新有什么区别呢?

我们很容易就想到,当页面刷新的时候,Vue实例会重新初始化,Vue实例初始化的过程中,挂载在它上面的Vue-Router,Store等内容也会重新初始化。而在不刷新的情况下,就不会重新初始化。

再想想,我们第一次登录之后,通过addRoutes添加了权限路由routes到router上,假设我们这个权限routes中包括了dashboard,user,role三个路由,那么当我们退出登录,然后重新登录的时候,由于同一个用户登录,后端返回的权限列表是一样的,生成的动态路由routes也是一样的(即里面同样包含了dashboard,user,role三个路由),那么此时再次添加这三个路由就导致router中挂载的routes重复。而在刷新的情况下,由于router重新初始化,只包含了初始化我们添加的不需要权限的路由,此时再次登录,重新添加就不存在路由重复的问题了。

通过以上的分析,我们搞清了问题的来源,那么如何解决呢,很遗憾,vue-router并没有删除路由的api。根据以上的分析,我们很容易想到,通过强制刷新页面的方式来重置router:即当用户退出登录的时候,通过js强制刷新一下页面。就可以解决问题。这种方式虽然可以解决问题,但显得不是很优雅,而且刷新页面导致资源重新加载和页面闪烁,体验也不是特别好。因此有没有在不刷新的情况下解决问题的办法呢?

经过一番搜索,终于找到了一种方法,即重置当前router的match属性:

router.js

// 定义一个函数来创建router
export const createRouter = routes => new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
});
 
// 在使用addRoutes的地方
// 重置当前router的match = 初始router.match
router.match = createRouter(constantRoutes).match;
router.addRoutes(routes);

这样就可以完美解决问题了。

总结:

整个解决的过程还是比较痛苦的,因为实际中我的代码是比较复杂的,并不像上面简化后那么简单。

整个addRoutes是在store.dispatch中完成,并且中间还夹杂着生成动态路由,根据动态路由再生成用户菜单等一系列功能,干扰比较大,并且这个是源码报警,不好定位,只能通过console和浏览器调试,一步步缩小报错范围,最终找到问题原因。

然后再通过google,以及搜索vue-router仓库的issue一步步找到解决方法。

所以想说,如果大家开发中遇到一些第三方依赖的问题,可以去搜索官方仓库的issue,很好用的,很多问题其实issue中都有答案。我是屡试不爽。

最后,一定要用google,百度,浪费我好长时间,啥都没找到~

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
js密码强度校验
Nov 10 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
canvas的神奇用法
Feb 03 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 #Javascript
解决vue项目router切换太慢问题
Jul 19 #Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 #Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP pear安装配置教程
2016/05/14 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript中如何处理引号编码"
2013/08/15 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python模拟实现分发扑克牌
2020/04/22 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
施工安全员岗位职责
2015/04/11 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书