Tengo los siguientes códigos de mi aplicación: store/modules/user.js
const state = { user: { id: "", email: "", orgName: "", }, isLoggedin: false, }; const getters = { currentUser: (state) => state, isLoggedin: (state) => state.isLoggedin, };enrutador/index.js
const routes = [{ path: "/sign-up", name: "Signup", component: () => import ("../views/auth/Signup.vue"), }, { path: "/", name: "Login", component: () => import ("../views/auth/Login.vue"), }, { path: "/dashboard", name: "Dashboard", component: () => import ("../views/Dashboard.vue"), meta: { requiresAuth: true }, }, { path: "/post", component: () => import ("../views/Index"), meta: { requiresAuth: true }, children: [{ path: "/", name: "posts", component: () => import ("../views/post/Index.vue"), }, { path: "create", component: () => import ("../views/post/Create.vue"), }, { path: "view", component: () => import ("../views/booking/View.vue"), }, ], }, ]; router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some((x) => x.meta.requiresAuth); const isLoggedin = store.getters["isLoggedin"]; console.log(router); if (requiresAuth && !isLoggedin) { next("/"); } else if (requiresAuth && isLoggedin) { next(); } else { next(); } });Con el código anterior, solo los usuarios autenticados pueden acceder a las rutas de publicación (crear, ver, indexar). Pero los usuarios registrados aún pueden visitar la página de inicio de sesión y volver a iniciar sesión.
state.user.isLoggedin se establece en verdadero cuando el usuario inicia sesión correctamente.
Me gustaría redirigir a los usuarios registrados a /dashboard cuando accedan a la URL de inicio de sesión.
¿Cuál sería la mejor lógica para esto?
Al igual que hizo el flujo requireAuth , también puede crear un flujo requireGuest :
const routes = [{ path: "/sign-up", name: "Signup", meta: { requiresGuest: true }, component: () => import ("../views/auth/Signup.vue"), }, { path: "/", name: "Login", meta: { requiresGuest: true }, component: () => import ("../views/auth/Login.vue"), }, { path: "/dashboard", name: "Dashboard", component: () => import ("../views/Dashboard.vue"), meta: { requiresAuth: true }, }, { path: "/post", component: () => import ("../views/Index"), meta: { requiresAuth: true }, children: [{ path: "/", name: "posts", component: () => import ("../views/post/Index.vue"), }, { path: "create", component: () => import ("../views/post/Create.vue"), }, { path: "view", component: () => import ("../views/booking/View.vue"), }, ], }, ]; router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some((x) => x.meta.requiresAuth); const requiresGuest = to.matched.some((x) => x.meta.requiresGuest); const isLoggedin = store.getters["isLoggedin"]; console.log(router); if (requiresAuth && !isLoggedin) { next("/"); } else if (requiresGuest && isLoggedin) { next("/dashboard"); } else { next(); } });Puede usar beforeEnter en la ruta de inicio de sesión para redirigir a los usuarios registrados al tablero.
{ path: "/", name: "Login", component: () => import ("../views/auth/Login.vue"), beforeEnter: async (to, from, next) => { const isLoggedIn = store.getters["isLoggedin"]; if (isLoggedIn) { return next("/dashboard"); } next(); }, },