大神 我这个地方这么写怎么会死循环呢

[hanzhenchaoGit]

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  console.log(store.getters.token, to, 'token----------------')
  if (store.getters.token) { // determine if there has token
    const roles = store.getters.roles.map(ro => ro.roleKey)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
        router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
        next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
        console.log('next---')
      })
    // 可删 ↑
    }
  } else {
  /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

大神 我这么写有什么问题 怎么有了token之后 next({...to,replace:true})这个地方会无限死循环 除了login都会进入死循环 求解 这个问题困扰了我好几天了

[PanJiaChen]

请对照

vue-element-admin/src/permission.js

Lines 40 to 49 in 5070e20

	} else {
	// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
	if (hasPermission(store.getters.roles, to.meta.roles)) {
	next()//
	} else {
	next({ path: '/401', replace: true, query: { noGoBack: true }})
	}
	// 可删 ↑
	}
	}

你在有token情况下少了一个逻辑判断。当有roles的情况下应该直接next()。

因为next({ ...to, replace: true })会再进一次router.beforeEach的，你这样不加我上面说的那个判断，就会死循坏了。

[hanzhenchaoGit]

我是不太明白这个next({ ...to, replace: true })代码执行的真正作用 能通俗易懂的说一下吗

[PanJiaChen]

// hack方法 确保addRoutes已完成

你可以试试直接 next()你会发现 addRoutes 可能还没有把所有路由都成功挂载，你会看到一个空白页，什么都没有。

[hanzhenchaoGit]

你的注释我有看到 就是不明白是怎么确保完成的 原理不明白

[cstmdzx]

你的注释我有看到 就是不明白是怎么确保完成的 原理不明白

我的理解是这样：直接next()会resolve当前的钩子，导航直接放行，进入to的地址，但是在next中添加一个地址，会中断当前的导航，并创建一个新的导航，新的导航在开始时会确认routes，从而保证了addroutes完成并生效，，，replace只是保证了去掉历史，在浏览器上按后退键失效，去掉应该也行，可能是为了防止后退刷新的，

[1755708014]

感谢大哥!!
解答了为什么roles为空的时候会死循环这个问题,一直没想过是因为导航被打断,会重新触发beforeEach的钩子.

你的注释我有看到 就是不明白是怎么确保完成的 原理不明白

我的理解是这样：直接next()会resolve当前的钩子，导航直接放行，进入to的地址，但是在next中添加一个地址，会中断当前的导航，并创建一个新的导航，新的导航在开始时会确认routes，从而保证了addroutes完成并生效，，，replace只是保证了去掉历史，在浏览器上按后退键失效，去掉应该也行，可能是为了防止后退刷新的，

[mrsevent]

但是怎么解决呢？老是死循环

[zch233]

// hack方法 确保addRoutes已完成

你可以试试直接 next()你会发现 addRoutes 可能还没有把所有路由都成功挂载，你会看到一个空白页，什么都没有。

没错，但不知道为啥