详解vue beforeEach 死循环问题解决方法


Posted in Javascript onFebruary 25, 2020

什么是beforeEach?

beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫。

什么是路由守卫?

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。**

文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

举个例子,当我们没有登录的时候,跳转到登录页面。如果登录了,则正常跳转。

下面我们来看下死循环代码。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    next({path: '/p404'})
  }
});

当 token 不存在于 session 中,跳转到 /p404,此时路由改变,再次进行判断,则又跳转到 /404,由此造成了死循环。在代码中进行一次判断,如果跳到 p404了,就让它安心的进路由吧。修改后代码如下。

export const router = new Router(RouterConfig);
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    if (to.path == '/p404') {
      next();
    } else {
      next({path: '/p404'})
    }
  }
});

到此这篇关于详解vue beforeEach 死循环问题解决方法的文章就介绍到这了,更多相关vue beforeEach 死循环 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue实现简易计算器
Feb 25 #Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python async with和async for的使用
2019/06/20 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python 字典套字典或列表的示例
2019/12/16 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
环境建设实施方案
2014/03/14 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
投资合作意向书范本
2015/05/08 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers