Migration "vue-router": "^3.2.0" To lest version "vue-router": "^4.1.6"

[leeobrum]

For you to understand my doubt, I'm migrating my projet to Vite+Pinia+Ts+elementUI Plus. But I ran into a problem with my permissions

• I can't use next({ ...to, replace: true })
• when I load the page it works, when I press F5 the permission error

I'll leave some examples...

Previous version:
``
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import AuthService from '@/services/auth.service'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login']

router.beforeEach(async (to, from, next) => {
AuthService.validaLogin().then( async (resultValidaLogin) => {
const hasToken = resultValidaLogin
//Start progress bar
NProgress.start()

if (hasToken !== 'Invalido') {
  if (to.path === '/login') {
    next({ path: '/' })
    NProgress.done()
  } else {
    const hasRoles = store.getters.userPermissionInfo.sAbreviatura && store.getters.userPermissionInfo.sAbreviatura.length > 0
    if (hasRoles) {
      next()
    } else {
      try {
        const userPermissionInfo = await store.dispatch('permissionInfo')
        const accessRoutes = await store.dispatch('permission/generateRoutes', userPermissionInfo)
        router.addRoutes(accessRoutes)

        next({ ...to, replace: true })
      } catch (error) {
        next(`/login?redirect=${to.path}`)
        NProgress.done()
      }
    }
  }
} else {
  /* has no token*/
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    // other pages that do not have permission to access are redirected to the login page.
    next(`/login?redirect=${to.path}`)
    NProgress.done()
  }
}

})
})

router.afterEach(() => {
// finish progress bar
NProgress.done()
})

My version of now

import router from "@/router"
import { configure, start, done } from "nprogress"
import "nprogress/nprogress.css"
import AuthService from "@/utils/auth.service"
import { useUserStore } from "@/store/userAuth"
import { usePermissionStore } from "@/store/permission"

configure({ showSpinner: false })
const whiteList = ['/login']

router.beforeEach((to, _from, next) => {
AuthService.validaLogin().then( async (hasToken) => {
//Start progress bar
start()
if(hasToken !== 'Invalido') {
if(to.path === whiteList[0]){
next({ path: '/' })
done()
} else {
try {
const userPermissionInfo = await useUserStore().userPermissionInfo
const accessRoutes = await usePermissionStore().generateRoutes(userPermissionInfo)

      accessRoutes.forEach((r: any) => {
        router.addRoute(r)
      })
      //next({ ...to, replace: true })
      next()
    } catch(error) {
      next(`/login?redirect=${to.path}`)
      done()
    }
  }
} else {
  //Hasn't token
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    //Other pages that do not have permission to access are redirected to the login page.
    next(`/login?redirect=${to.path}`)
    done()
  }
}

})
})
router.afterEach(() => {
// finish progress bar
done()
})