vue-admin-element路由死循环，页面白屏卡死问题

淩亂°似流年 2022-12-30 10:56 114阅读 0赞

### 原理： ###

permisson.js中，router.beforeEach()做了路由拦截

beforeEach 守卫是异步解析执行，只有执行next()才表示路由成功可以被resolved，跳出循环直接进入to路由。  
next(‘login’) 表示路由拦截成功，重定向至login，会再次调用beforeEach()  
next() 和 next(\{ …to, replace: true \})是不一样的，后者会再次调用beforeEach()

### BUG出现原因： ###

beforeEach()一直没有调用到next(),出现无限循环。  
我这里的出现原因是没有拿到用户权限roles信息，导致一直无限循环  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]

### 解决： ###

在store中写了一个触发SET\_ROLES的方法，并在第一次走此循环的时候触发一下。  
/src/store/modules/user.js：

//写在方法actions对象中
    setRole({ commit }, roles) {
        return new Promise(resolve => {
          commit('SET_ROLES',roles )
          resolve()
        })
      },

permisson.js中在初次循环时调用（上图黄色标注处）  
注意：在被aysnc修饰的beforeEach中共调用store的异步函数，由于beforeEach加上了async修饰，store调用是前面要加上await修饰嗷。

await store.dispatch('user/setRole', roles)

ps：[详细VUE 路由守卫 next() / next(\{ …to, replace: true \}) / next(‘/‘)的区别可参考这篇][VUE _ next_ _ next_ _to_ replace_ true _ _ next]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]: /images/20221120/4db4e3d13576447cb59939aefea10888.png
[VUE _ next_ _ next_ _to_ replace_ true _ _ next]: https://blog.csdn.net/qq_41912398/article/details/109231418

发表评论取消回复

表情：

评论列表（有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue路由守卫，动态路由刷新白屏

也就是说此时addRoutes()已经完成啦，找到对应的路由之后，接下来将执行前往对应路由的beforeEach((to, from, next) ，因此需要用代码来判断...

朱雀/ 2024年04月20日 22:12/ 0 赞/ 77 阅读

相关 Groovy中使用Swagger导致,页面卡死问题

Groovy中使用Swagger导致,页面卡死问题在groovy中使用swagger,在生成的swagger-ui页面中,关于model的内容,因为包含大量的metac

谁践踏了优雅/ 2023年07月19日 08:18/ 0 赞/ 5 阅读

相关死循环

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2023年02月20日 13:46/ 0 赞/ 11 阅读

相关 vue-admin-element路由死循环，页面白屏卡死问题

原理： permisson.js中，router.beforeEach()做了路由拦截 beforeEach 守卫是异步解析执行，只有执行next()才表示路由成功可以

淩亂°似流年/ 2022年12月30日 10:56/ 0 赞/ 115 阅读

相关二分查找死循环问题

二分查找死循环问题看代码 public class Solution_69 { public int mySqrt(int x)

梦里梦外;/ 2022年10月20日 00:58/ 0 赞/ 185 阅读

相关 json传递死循环问题

可能有时我们需要将某个对象要传给前端，但是因为可能会有互相引用的情况出现，这是json使用所必须面对的。有三个方案，方案1：写个bean，将相互引用的给去掉。方案2

我会带着你远行/ 2022年08月10日 04:51/ 0 赞/ 185 阅读

相关 HashMap死循环问题

0 说明 HashMap通常会用一个指针数组（假设为table\[\]）来做分散所有的key，当一个key被加入时，会通过Hash算法通过key算出这个数组的下标i，然后

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 12:20/ 0 赞/ 182 阅读

相关 HashMap死循环问题

大家都知道，相比于HashTable，HashMap是一个非线程安全的实现类。为什么说HashMap是非线程安全的呢？因为在高并发情况下，HashMap在一些操作上会存在问

我会带着你远行/ 2022年05月26日 01:00/ 0 赞/ 239 阅读

相关 Java-HashMap死循环问题

Hash表数据结构 HashMap通常会用一个指针数组（假设为table\[\]）来做分散所有的key，当一个key被加入时，会通过Hash算法通过key算出这个数组的下

末蓝、/ 2022年05月22日 10:20/ 0 赞/ 224 阅读

相关 HashMap扩容死循环问题

JDK 1.7 HashMap 扩容核心算法下面这是JDK 1.7中HashMap扩容时调用的核心代码，作用是将原hash桶中的节点转移到新的hash桶中：

今天药忘吃喽~/ 2022年05月16日 13:50/ 0 赞/ 260 阅读