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

淩亂°似流年 2022-12-30 10:56 122阅读 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