vue beforeEach 死循环问题解决方法

最新推荐文章于 2024-07-10 18:48:26 发布
最新推荐文章于 2024-07-10 18:48:26 发布
阅读量1.5k 收藏 5
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43137725/article/details/104465110
版权
本文介绍了Vue Router中的beforeEach路由守卫引起死循环的问题及其解决方案。当token不在session中时，原本会导致无限重定向的代码通过增加判断条件成功避免了死循环，确保用户能够正确地被引导到404页面或登录页面。
摘要由CSDN通过智能技术生成

什么是beforeEach？ beforeEach 是一个vue-router的路由导航钩子，一般我用它做路由守卫。
什么是路由守卫？ 举个例子，当我们没有登录的时候，跳转到登录页面。如果登录了，则正常跳转。

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

export const router = new Router(RouterConfig);

router.beforeEach((to, from, next) 
最低0.47元/天 解锁文章
绿茶程序媛
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue beforeEach 死循环问题解决方法
11-20
什么是beforeEach？ beforeEach 是一个vue-router的路由导航钩子，一般我用它做路由守卫。 什么是路由守卫？ 路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。** 文档地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 举个例子，当
vue中router.beforeEach()死循环
肖潇不写代码
12-26 1503
vue中router.beforeEach()死循环
解决vue使用beforeEach路由导航守卫死循环
qq_40513296的博客
07-08 2315
解决vue路由导航守卫死循环问题
vue路由守卫beforeEach-afterEach
最新发布
mebius的技术博客
07-10 517
前端路由控制权限控制必修
七夕奉上，拿走不谢：vue router.beforeEach() 出现死循环解决方案（Maximum call stack size exceeded）
GreyCastle的博客
08-25 1300
前言： 今天做vue路由遇到了一个问题，想了好久。经过不断的查资料和分析代码终于解决了。 先展示下报错：意思就是堆栈满了，溢出了。 分析原因之前先了解下next()和next('xxxx')看完这个你就会恍然大悟 next()表示路由成功，直接进入to路由，不会再次调用router.beforeEach() next('/login')表示路由拦截成功，重定向至login，会再次调用router.beforeEach() 再看代码：看完后不明白，可能兄弟你要喝点六个核桃，哈哈！ ro..
Vue中beforeEach死循环问题
m0_54310883的博客
04-27 546
原因就在于next在进入BackLogin前会再一次的执行beforeEach，这样就会一直循环下去，导致死循环，所以解决方法就是直接跳出死循环就好了。
解决vue-router路由拦截造成死循环问题
11-19
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环. router的index.js文件路由配置 const router = new Router({ routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: ...
Vuerouter的beforeEach与afterEach钩子函数的区别
10-17
在使用 `beforeEach` 钩子时，为了避免死循环（dead loop），我们需要确保当目标路由和当前路由相同时，不会再次触发导航。可以通过比较 `to.path` 和 `from.path` 来避免这种情况。 总的来说，beforeEach 和 after...
beforeEach陷入死循环：router.beforeEach在做判断token跳转login界面用if(){}else(){}嵌套会出问题。
zhoumengmengya的博客
12-15 1437
router.beforeEach((to, from, next) => { // fakeRouter是通过后台接口请求回来的数据 console.log('后台接口请求回来的数据: ', store.state.fakeRouter) const isLogine = store.state.isLogin const isToken = localStorage.getItem("token") if (to.path === '/login') return n...
router.beforeEach使用不当导致死循环，引发RangeError: Maximum call stack size exceeded
qq_40342969的博客
08-30 2104
vue报错-RangeError: Maximum call stack size exceeded
导航守卫的使用记录和beforeEach( )死循环的问题
qq_44161722的博客
10-17 296
上面代码会导致页面是空白的，猜测是因为当我们刷新 http://localhost:8080/ 后先会执行 router.beforeEach( ) 该方法，因为我们还没有登录，所以获取到本地存储的token为null，会重定向到 /login 登录页面去，重定向到这个页面就会再次执行beforeEach( )方法，造成死循环。当时在做这一部分时遇到一个问题，就是beforeEach出现了死循环，导致死循环的代码如下。在进行拦截之前要在登录成功后把用户token存储到localStorage中。
vue路由守卫死循环及next原理解释
Codewarning
04-22 5778
​ 在使用vue路由守卫的beforeEach方法时可能会出现无限递归，也就是死循环的问题，根本原因在于next()方法在不合适的地方错误调用所致，先来看一下官方对next()方法的解释： beforeEach方法体： router.beforeEach((to, from, next) => { // ... }) 经过我的测试了一些数据,大概猜测出next()方法的底层实现逻辑(别问为什么不看源码,不会ts,我搞后端的) 经过我的测试,实际上,next()方法的调用是个递归的过程 以下用粗
router.beforeEach死循环原因并且免登陆操作
qq_14926871的博客
12-06 2440
首先，我想要在通过判断token的值来确定用户是不是已经登录，如果没有登录的用户只能访问登录页 router.beforeEach((to, from, next) => { let token = window.localStorage.getItem('token'); if( !token){ next({path: '/'}) } else { ...
熟悉Vue路由的beforeEach陷入死循环的情况
qq_44849271的博客
07-01 1092
不了解路由守卫的next很容易让页面陷入死循环。以全局前置路由为例，陷入路由死循环一般报错是堆栈溢出也就是：RangeError: Maximum call stack size exceededrouter.js 当从Index.vue离开时就会陷入死循环。 要清楚前置路由陷入死循环的原因,就要明白前置路由守卫的next函数 流程解析：刚开始的时候 目标路由是/Center，来源路由是/Index，执行前置路由守卫，判断到if为true,于是执行next(‘/an’)，目标路由改成了/an，但来源路由仍
vue router.beforeEach() 出现死循环解决方案
热门推荐
sj1527382290的博客
03-20 1万+
https://segmentfault.com/a/1190000011042794
Vue 之vue-router router.beforeEach导航守卫，陷入死循环
ShiYadong的专栏
01-09 6656
官方文档 :https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 判断浏览器缓存是否有用户的信息，没有的话跳转登录页。 看了官方文档，直接这样写了。（试了手动清除缓存，再从url里面跳登录页，直接陷入了死循环） router.beforeEach((to,from,next)=>{ if(sessionS...
vue 设置路由拦截时router.beforeEach陷入死循环（已解决）
weixin_43978501的博客
01-06 2126
在优化vue 的路由时，设置路由拦截，陷入死循环，尝试了很多方法 话不多说，上代码： 1、设置去到指定页面时，要把path修改成指定页面 router.beforeEach((to, from, next) => { if(store.state.logined){ next(); }else { //没有登录，去跳转登录页 if(to.path === '/login'){ next(); }else { next({
vue router.beforeEach() 出现死循环解决方案（Maximum call stack size exceeded）
weixin_44099358的博客
03-29 841
next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach() next(’/login’) 表示路由拦截成功，重定向至login，会再次调用router.beforeEach() if(localStorage.getItem('userInfo')){ //已登录去首页 if(to.path=='/login'){ next({path:'/'}) }else{ next(.
router.beforeeach死循环
03-16
router.beforeEach是Vue Router中的一个导航守卫，用于在路由切换前进行一些操作，比如权限验证、登录状态检查等。如果在beforeEach中不正确地使用next函数，就可能会导致死循环的问题。 具体来说，如果在beforeEach中不调用next函数，或者在next函数中传入了当前路由对象，就会导致死循环。因为beforeEach会在每次路由切换前都被调用，如果没有正确地调用next函数，就会一直停留在当前路由，从而形成死循环。 解决这个问题的方法是，在beforeEach中正确地使用next函数，确保在需要跳转到下一个路由时调用next函数，并传入正确的参数。如果不需要跳转，则直接调用next函数即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值