Problem record: dynamic routing lost after vue3 refresh

My wrong approach:

import router from './router'
import store from './store'
import layout from '@/layout/index'
import { getItem } from '@/utils/storage'
import {  TOKEN } from '@/constant'

// 白名单
const whiteList = ['/login']
/**
 * 路由前置守卫
 */
router.beforeEach(async (to, from, next) => {
  // 存在 token ，进入主页
  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 判断用户资料是否获取
      // 若不存在用户信息，则需要获取用户信息
      if (!store.getters.hasUserInfo) {
        // 触发获取用户信息的 action
        const { permission_id } = await store.dispatch('user/getUserInfoStore')
        if (permission_id === 1 && permission_id !== null) {
          const filterRoutes = [
            {
              path: '/user',
              component: layout,
              name: 'personnel',
              redirect: '/user/manage',
              meta: {
                title: '用户',
                icon: 'personnel'
              },
              children: [
                {
                  path: '/user/manage',
                  name: 'manage',
                  component: () => import('@/views/user-manage/index'),
                  meta: {
                    title: '员工管理',
                    icon: 'personnel-manage'
                  }
                },
                {
                  path: '/user/import',
                  name: 'import',
                  component: () => import('@/views/import/index'),
                  meta: {
                    title: 'excelImport'
                  }
                },
                {
                  path: '/user/add',
                  name: 'add',
                  component: () => import('@/views/addUser/index'),
                  meta: {
                    title: 'userImport'
                  }
                }
              ]
            }
          ]
          store.commit('permission/setRoutes', filterRoutes)
          // 利用 addRoute 循环添加
          filterRoutes.forEach((item) => {
            router.addRoute(item)
          })
          // 添加完动态路由之后，需要在进行一次主动跳转
         return next(to.path)
        }
      }
      next()
    }
  } else {
    // 没有token的情况下，可以进入白名单
    if (whiteList.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }
})
```

After solving:

let load = 0
router.beforeEach(async (to, from, next) => {
  // 存在 token ，进入主页
  if (getItem(TOKEN)) {
    if (to.path === '/login') {
      next('/')
    } else {
      if (!store.getters.hasUserInfo || load === 0) {// 关键点
        // 触发获取用户信息的 action
        const { permission_id } = await store.dispatch('user/getUserInfoStore')
        if (permission_id === 1 && permission_id !== null) {
          load++
          const filterRoutes = [
            {
              path: '/user',
              component: layout,
              name: 'personnel',
              redirect: '/user/manage',
              meta: {
                title: '用户',
                icon: 'personnel'
              },
              children: [
                {
                  path: '/user/manage',
                  name: 'manage',
                  component: () => import('@/views/user-manage/index'),
                  meta: {
                    title: '员工管理',
                    icon: 'personnel-manage'
                  }
                },
                {
                  path: '/user/import',
                  name: 'import',
                  component: () => import('@/views/import/index'),
                  meta: {
                    title: 'excelImport'
                  }
                },
                {
                  path: '/user/add',
                  name: 'add',
                  component: () => import('@/views/addUser/index'),
                  meta: {
                    title: 'userImport'
                  }
                }
              ]
            }
          ]
          store.commit('permission/setRoutes', filterRoutes)
          // 利用 addRoute 循环添加
          filterRoutes.forEach((item) => {
            router.addRoute(item)
          })
          // 添加完动态路由之后，需要在进行一次主动跳转
          // next(to.path)
          next({ ...to, replace: true })// 之前是return next(to.path)
        }
      }
      next()
    }
  } else {
    // 没有token的情况下，可以进入白名单
    if (whiteList.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }
})

problem causes:

The reason for the problem is the judgment condition store.getters.hasUserInfo.

I originally wanted to judge whether to refresh based on the userinfo of vuex lost after refreshing. The first if judges the token, and the token indicates the login status. The second is to judge hasuserinfo. If there is no value, it means that it has been refreshed or logged in for the first time. However, in practice, it is found that the first login is indeed the normal display route of userinfo without vuex. However, there is no userinfo after refreshing, but it still shows that there is , that is, hasuserinfo is still true after refreshing.

solve:

Add the variable load = 0 before the front guard of the route. Once refreshed, the load will always be 0.

Add the condition of dynamic routing: (!store.getters.hasUserInfo || load === 0 ), the first login is the front, and the refresh is the back. If you have added dynamic routing, load++, the purpose is to add routing again and again without refreshing.

Finally, this was changed: next({ ...to, replace: true })// was return next(to.path) before, which means that if addroute is not completed, the routing guard will execute layer by layer until addroute is completed. Find the corresponding route.

Because it is found that if it is still the previous situation, perform an active jump and re-enter the navigation guard, then the load will still be 0, and it will directly start an endless loop. Load === 0