Estoy trabajando en una aplicación Vue.js y necesito implementar protectores de enrutador para limitar el acceso según la función del usuario y evitar que un usuario no registrado acceda a la aplicación. El proceso de inicio de sesión involucra una aplicación externa (WSO2 Identity Server, específicamente), y la información del usuario recuperada se guarda en una tienda Vuex. El problema es que la función de inicio de sesión es asíncrona, por lo tanto, cuando se ejecutan las protecciones del enrutador, la información del usuario aún no está disponible. Para que funcione, llamé a la función de inicio de sesión dentro de una función asíncrona anónima y puse los guardias dentro de then bloque. Como no encontré ejemplos de este enfoque en Internet, me gustaría saber si es correcto o si hay una mejor manera de manejar este problema. Gracias a todos de antemano.

Aquí hay un ejemplo de mi código de enrutador:

 ... router code (async function() { // get user data and saves them in the vuex store await userService.initUserData(); })().then( function() { const isAuthenticated = store.getters.getIsAuthenticated; const userRole = store.getters.getUserRole; router.beforeEach((to, from, next) => { // check if user is logged in, // if not redirect to login page (LoginPage) if (to.name !== 'LoginPage' && !isAuthenticated) { next({ name: 'LoginPage' }); } else { if (to.meta.customerAuth) { if (userRole === 'Customer') { next(); } else if (userRole === 'Admin') { next({ name: 'AdminView' }); } else { next({ name: 'LoginPage' }); } } else if (to.meta.adminAuth) { if (userRole === 'Admin') { next(); } else if (userRole === 'Customer') { next({ name: 'CustomerView' }); } else { next({ name: 'LoginPage' }); } } } }) } );