I have the following codes from my app: store/modules/user.js
const state = {
user: {
id: "",
email: "",
orgName: "",
},
isLoggedin: false,
};
const getters = {
currentUser: (state) => state,
isLoggedin: (state) => state.isLoggedin,
};router/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();
}
});With the above code only authenticated users can access post routes (create, view, index). But logged in users still can visit login page and relogin.
state.user.isLoggedin is set to true when user is logged in sucessfully.
I would like to redirect logged in users to /dashboard when they hit login url.
What would be the best logic for this ?
Just like you made the requireAuth flow, you can also create a requireGuest flow:
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();
}
});
You can use beforeEnter on the login route to redirect logged in users to the dashboard.
{
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();
},
},