vue路由守卫死循环及next原理解释

在使用vue路由守卫的beforeEach方法时可能会出现无限递归，也就是死循环的问题，根本原因在于next()方法在不合适的地方错误调用所致，先来看一下官方对next()方法的解释：

beforeEach方法体：

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

经过我的测试了一些数据,大概猜测出next()方法的底层实现逻辑(别问为什么不看源码,不会ts,我搞后端的)

经过我的测试,实际上,next()方法的调用是个递归的过程

以下用粗略的js代码来还原next()过程可能发生了什么,有问题请指出:

let router={}
let router.to='xxx'
let router.from='xxx'//声明next函数
next:function(to,from,_next){if(to===undefined){//TODO//相当于beforeEach里面调用next(),也就是放行,return回去,继续执行beforeEach后面的语句return;}else if(typeof to=='string'){//TODO//相当于beforeEach里面调用next('/string'),此时当前要前往的path被改变了,所以继续调用一层router.beforeEach。对新的path调用路由守卫进行校验,这种情况最容易出现死循环(死递归)router.to=to;router.beforeEach(router.to,rourer.from,next);//回到上一层beforeEach,继续执行后面的代码return;}
}router.beforeEach((to,from,next)=>{//程序员TODO
})router.beforeEach(router.to,rourer.from,next);//路由守卫调用

beforeEach和next是个轮流相互调用的过程,容易造成死循环

这里给出一种无死循环的样例:

router.beforeEach((to,from,next)=>{console.log(to.path);if(to.path==='/login'){console.log(1)next();}else{let user=localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):null;if(user){console.log(2)next();}else {console.log(3)next('/login');}}console.log(4)
})

以下是一些测试样例:

当我未登录,前往'/content'页面时,控制台打印情况:

/content
3
/login
1
4
4

打印内容	解释
/content	前往/content页面，console.log(to.path)执行
3	不是/login页面，又未在localStorage中获取到user相关信息，执行console.log(3)，调用next(‘/login’)方法
/login	next(‘/login’)执行期间，当前要前往的url已经变成了/login，所以再一次调用beforeEach方法，方法第一行console.log(to.path);打印了当前要前往的url是/login
1	beforeEach方法中第二行if(to.path===‘/login’)成立，console.log(1)打印1，执行next()方法
4	因为next方法中没携带参数，又return回来了，跳过else语句，执行beforeEach方法中的console.log(4)
4	回到最外层的beforeEach方法，跳过else语句，再跳出到else语句外层，执行console.log(4)

当我未登录,前往'/login'页面时,控制台打印情况:

/login
1
4

打印内容	解释
/login	当前要前往的是/login页面，beforeEach第一行console.log(to.path);打印
1	if(to.path===‘/login’)成立，打印console.log(1)
4	继续执行next()方法，未携带参数,next方法return回到beforeEach，跳过else语句，执行console.log(4)

综上,尽量别在beforeEach函数内前面调用带参数的next()函数,但也不能一个next()方法都不写.

vue路由守卫死循环及next原理解释相关推荐

vue路由守卫中next方法的理解
vue路由守卫中next方法的理解在网上看到了一篇通俗易懂的文章,此文章出处在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
最近因为next()遇到了不少问题,在这里记录一下首先是路由守卫,是不是感觉简简单单 beforeEach((to, from, next) => {to // 要去的路由from // 当前 ...
vue路由守卫有哪三种类型
vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫.全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫). 路由守卫,也可以是路由拦截,我们可以通过路由 ...
vue路由守卫beforeEach和afterEach
路由守卫路由前置守卫beforeEach 路由在每次切换之前,都会到用一个函数:beforeEach 举个简单的栗子:如果当前跳转的路由路径是/home或者/about时才能查看页面,否则提示无权限 ...
Vue路由守卫（导航守卫）
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
vue路由守卫的使用
使用路由守位我们需要使用vuex来存放全局的用户信息 ①存在全局用户信息 1.首先展示我的项目路径 2.store/index.js文件内容如下: 这里主要是引入一些文件,以及进行挂载 import ...

vue路由守卫死循环及next原理解释

vue路由守卫死循环及next原理解释相关推荐

最新文章

热门文章