En una aplicación vue 3 que usa pinia, quiero lograr lo siguiente

1. redirigir a un usuario a la página de inicio de sesión siempre que un usuario no esté autenticado
2. redirigir a un usuario a una página de verificación si el usuario se autenticó pero no se verificó
3. redirigir a un usuario al tablero si el usuario está autenticado y verificado

Por el momento, he podido redirigir a los usuarios no autenticados a la página de inicio de sesión y redirigirlos al tablero cuando se autenticaron escribiendo el archivo index.js de mi enrutador de esta manera

 import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: "/signin", name: "signin", component: () => import("../views/SignIn.vue"), }, { path: "/verify", name: "verify", component: () => import("../views/Verification.vue"), meta: { needsAuth: true } }, { path: "/dashboard", name: "dashboard", component: () => import("../views/UserDashboard.vue"), meta: { needsAuth: true } } ] }) router.beforeEach(async (to, from, next) => { if (to.meta.needsAuth && localStorage.getItem('accessToken') == null) next('signin') else next() }) export default router

y aquí está el método que maneja el inicio de sesión

 const loginUser = async () => { try { const res = await axios.post( "https://some-api-url/login", signin.value, { headers: { Accept: "application/json", "Content-Type": "application/json", }, } ); localStorage.setItem("accessToken", res.data.data.accessToken); // redirect home router.push("/dashboard"); } catch (error) { error = error.response.data.message; alert(error); } };

Ahora mi desafío es que el punto final de inicio de sesión al que llamo solo devuelva un token de acceso, pero el punto final del panel de control devuelva el estado verificado. ¿Cómo puedo lograr redirigir a los usuarios no verificados a la página de verificación?