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