En una aplicación vue 3 que usa la API de composición, quiero hacer una de 2 cosas en función de si un usuario autenticado está verificado o no. Entonces, si el usuario no está verificado, envíelo a la página de verificación. Pero si el usuario está verificado, envíe al usuario al tablero.
Para lograr esto, estoy usando protectores de navegación en mi enrutador index.js como este
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), 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 }, beforeEnter: (to, from, next) => { if (localStorage.getItem('verified') == "false") next('verify') } }, ], }); router.beforeEach(async (to, from, next) => { if (to.meta.needsAuth && localStorage.getItem('accessToken') == null) next('signin') else next() }) export default router Luego, en la script setup de mi página de inicio de sesión, tengo el siguiente código
import { ref } from "vue"; import { useRouter } from "vue-router"; import axios from "axios"; const router = useRouter(); const signin = ref({ email: null, password: null, }); const loginUser = async () => { try { const res = await axios.post( "https://mydomain/api/login", signin.value, { headers: { Accept: "application/json", "Content-Type": "application/json", }, } ); localStorage.setItem("accessToken", res.data.data.accessToken); localStorage.setItem("verified", res.data.data.verified); router.push({ name: "dashboard" }); } catch (error) { alert(error.response.data.message); } };Ahora, cuando inicio sesión con un usuario no verificado, se me redirige a la página de verificación según lo previsto. Pero cuando inicio sesión con un usuario verificado, nunca me envían al tablero y, en cambio, la aplicación permanece en la vista de inicio de sesión.
Parece que no puedo entender cuál es el problema. ¿Cómo puedo solucionar este problema de enrutamiento?
¿Intentó con next() si el usuario está verificado?
beforeEnter: (to, from, next) => { if (localStorage.getItem('verified') == "false") next('verify') else next() }