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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
微信小程序实现星级评价
Nov 20 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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源码之 ext/mysql扩展部分
2009/07/17 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python中Genarator函数用法分析
2015/04/08 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python学习笔记之装饰器
2020/08/06 Python
python高级特性简介
2020/08/13 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
大专学生求职自荐信
2014/07/06 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
生死抉择观后感
2015/06/09 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电