vue路由守卫及路由守卫无限循环问题详析


Posted in Javascript onSeptember 05, 2019

先贴一波官方文档的内容

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。确保要调用 next 方法,否则钩子就不会被 resolved

然后这是我自己的总结

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/Login'
import Index from '../pages/index/Index'
import Library from '../pages/library/Library'
import Design from '../pages/design/Design'
import Administration from '../pages/administration/Administration'
import Production from '../pages/production/Production'

import Global from '../common/global/Global'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  name: 'login',
  component: Login
 }, {
  path: '/index',
  name: 'index',
  component: Index
 }, {
  path: '/library',
  name: 'library',
  component: Library
 }, {
  path: '/design',
  name: 'design',
  component: Design
 }, {
  path: '/administration',
  name: 'administration',
  component: Administration
 }, {
  path: '/production',
  name: 'production',
  component: Production
 }
 ]
})

router.beforeEach ((to,from,next) => {
 //将所有需要登陆才显示的页面的路由都放进一个数组
 const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
 //获取登陆状态
 let isLogin = Global.isLogin
 
 if(to.name === 'login') { //如果是登录页,则跳过验证
 next() //必不可少
 return //以下的代码不执行
 }
 if(nextRoute.indexOf(to.name) >= 0) { //判断该页面是否需要登陆
 if(!isLogin) { //判断登陆状态
  next({ name : 'login'}) //如果未登录,则跳转到登录页
 } else {
  next() //如果已经登陆,那就可以跳转
 }
 } else { //其他的无需登陆的页面不做验证
  next()
 }
 
})

export default router

这样就实现了全局路由守卫

关于路由守卫无限循环问题

如果你的代码是这样

if(isLogin) {
 next()
 } else {
 next({ name: 'login')}
 }

这样的话就会陷入无限循环

因为你的   next({ name: 'login')} 是相当于一个路由跳转,它会再次触发全局路由守卫,你又进入了全局路由守卫进行再次判断,如此循环。

所以,想要结束路由守卫,整段代码的逻辑必须由 next() 进行结尾。比如像我上面写的,当需要进入登录页的时候,

if(to.name === 'login') { 
 next() 
 return 
 }

加上这个判断,当你进入登录页的时候也会调用next() , 路由守卫进入确认状态,路由才会进行跳转

以上就是我在学习vue-router的路由守卫的总结

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
vue中template的三种写法示例
Oct 21 Javascript
关于JS解构的5种有趣用法
Sep 05 #Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 #Javascript
JavaScript获取某一天所在的星期
Sep 05 #Javascript
layui table设置某一行的字体颜色方法
Sep 05 #Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 #Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 #Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
分享Python字符串关键点
2015/12/13 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
利用python实现周期财务统计可视化
2019/08/25 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python 决策树算法的实现
2020/10/09 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
大四毕业生自荐书
2014/07/05 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
房屋维修申请报告
2015/05/18 职场文书