详解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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
原生js实现放大镜组件
Jan 22 Javascript
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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
激活 ActiveX 控件
2006/10/09 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python字符串替换实例分析
2015/05/11 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python实现购物车程序
2018/04/16 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python编写实现抽奖器
2020/09/10 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
业务经理的岗位职责
2013/11/16 职场文书
学校消防安全制度
2014/01/30 职场文书
个人课题方案
2014/05/08 职场文书
库房管理员岗位职责
2015/02/12 职场文书
通知的格式范文
2015/04/27 职场文书
毕业论文致谢词
2015/05/14 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
安全教育主题班会教案
2015/08/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
JavaScript实现简单图片切换
2021/04/29 Javascript