详解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 相关文章推荐
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
JavaScript Event Loop相关原理解析
Jun 10 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 insert语法详解
2008/06/07 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
深入浅析python 中的匿名函数
2018/05/21 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
入党积极分子思想汇报范文
2014/01/05 职场文书
扬尘污染防治方案
2014/06/15 职场文书
离职证明标准格式
2014/09/15 职场文书
婚礼父母答谢词
2015/01/04 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers