问题记录：vue3 刷新后丢失动态路由

我的错误做法：

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')
    }
  }
})
```

解决后：

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')
    }
  }
})

问题原因：

出现问题的原因是判断条件store.getters.hasUserInfo。

我本来是想根据刷新后丢失vuex的userinfo来判断是不是刷新，第一个if判断token，有token说明是登陆状态。第二个判断hasuserinfo，如果没有值说明是刷新了或者第一次登录，但是实践中发现第一次登录确实是没有vuex的userinfo的正常显示路由，但是刷新后明明没有userinfo了，却还是显示有，也就是刷新后hasuserinfo还是为true。

解决：

在路由前置守卫前增加变量load = 0，一旦刷新，load永远是0。

增加动态路由的条件：(!store.getters.hasUserInfo || load === 0)，第一次登录是前面，刷新后是后面。如果增加过动态路由，load++，目的在于如果没有刷新不至于死循环的一次次添加路由。

最后还改动了这个：next({ ...to, replace: true })// 之前是return next(to.path)，表示如果addroute没完成，路由守卫会一层层的执行，直到addroute完成，找到对应路由。

因为发现如果还是之前的情况，进行一次主动跳转重新进了一次导航守卫，那么load还是0，会直接开始死循环一直是load === 0