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 相关文章推荐
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
JS实现标签页切换效果
May 04 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
js实现类选择器和name属性选择器的示例步骤
Feb 07 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入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python列表list排列组合操作示例
2018/12/18 Python
python实现剪切功能
2019/01/23 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
工作中个人的自我评价
2013/12/31 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2015年个人思想总结
2015/03/09 职场文书
童年读书笔记
2015/06/26 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
MySQL学习之基础操作总结
2022/03/19 MySQL