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 EasyUI API 中文文档 - Form表单
Oct 06 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
微信小程序的生命周期的详解
2017/10/19 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
对python3新增的byte类型详解
2018/12/04 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python程序需要编译吗
2020/06/19 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
新年团拜会主持词
2014/04/02 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
植树节新闻稿
2015/07/17 职场文书
远程教育学习心得体会
2016/01/23 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技
React更新渲染原理深入分析
2022/12/24 Javascript