vue路由守卫执行的问题

Question

因为项目的需要，我根据这个帖子做了一些调整。https://segmentfault.com/a/11...
这个帖子里的请求的是axios数据，在登录页就会得到路由数据
但我的需求是登录成功后才会得到response，因为每个账户的路由权限和配置是不一样的。
我想实现登录后执行GetInfo函数，得到router这个数据，然后按照帖子实现动态路由

router.beforeEach((to, from, next) => {
  if (!getRouter) {//不加这个判断，路由会陷入死循环
    if (!getObjArr('router')) {

      store.dispatch('GetInfo').then(res => {
        console.log('----------------调用了GETINFO-------------')
        let router = store.state.user.router
        for (let i = 0; i < router.length; i++) { //更改url为component
          router[i].component = router[i].url;
          router[i].component = 'Layout'
          router[i].meta = {};
          delete router[i].url;
          delete router[i].isMenu;
          delete router[i].parentId;
          delete router[i].remark;
          delete router[i].sort;
          delete router[i].status;
          for (let j = 0; j < router[i].sysPermissions.length; j++) {
            router[i].sysPermissions[j].component = router[i].sysPermissions[j].url.slice(5) + '/index';
            router[i].sysPermissions[j].meta = {};
            delete router[i].sysPermissions[j].url
            delete router[i].sysPermissions[j].isMenu
            delete router[i].sysPermissions[j].parentId
            delete router[i].sysPermissions[j].remark
            delete router[i].sysPermissions[j].sort
            delete router[i].sysPermissions[j].status
            delete router[i].sysPermissions[j].sysPermissions
          }
        }

        for (let i = 0; i < router.length; i++) { //更改id为path
          router[i].path = '/' + router[i].id
          delete router[i].id;
          for (let j = 0; j < router[i].sysPermissions.length; j++) {
            router[i].sysPermissions[j].path = router[i].sysPermissions[j].id;
            delete router[i].sysPermissions[j].id
          }
        }
        for (let i = 0; i < router.length; i++) { //更改sysPermissions为children
          router[i].children = router[i].sysPermissions;
          delete router[i].sysPermissions;
        }
        console.log(router, '--------vuex router--------')
        var [...newRouter] = router  //复制为新数组
        console.log(newRouter, '--------vuex newRouter--------')

        // getRouter = newRouter   //后台拿到路由
        // saveObjArr('router', getRouter) //存储路由到localStorage
        // routerGo(to, next)//执行路由跳转方法
      }).catch((err) => {
        console.log('err' + err)
      })


      axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {
        console.log('-------------调用了axios----------------')
        getRouter = res.data.data.router//后台拿到路由
        console.log(getRouter,'-------------getRouter----------------')
        saveObjArr('router', getRouter) //存储路由到localStorage
        routerGo(to, next)//执行路由跳转方法
      })
    } else {//从localStorage拿到了路由
      getRouter = getObjArr('router')//拿到路由
      routerGo(to, next)
    }
  } else {
    next()
  }

下面是无缓存无cookie下登录页的打印信息

是不是应该是aftereach呢？

Answer 1

动态添加路由示例 https://github.com/big-MuMu/v...