[Vuejs]-Auth0 and Vue 3, route to different view AFTER log in, depending on what role user has

by

0👍

✅

After loggin in the user, yo can check its role and redirect it to his corresponding home with a router.push("homeX") for example. And then in the router file, do something like this:

export const router = new Router({
    mode: 'history',
    routes: [
        { 
            path: '/', 
            component: HomePage, 
            meta: { authorize: [] } 
        },
        { 
            path: '/homeX', 
            component: HomeX, 
            meta: { authorize: [Role.X], role: "X" } 
        },
        { 
            path: '/homeY', 
            component: HomeY, 
            meta: { authorize: [Role.Y], role: "Y" } 
        },
        { 
            path: '/login', 
            component: LoginPage 
        },

        // otherwise redirect to home
        { path: '*', redirect: '/' }
    ]
});

router.beforeEach((to, from, next) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const { authorize } = to.meta;
    const currentUser = authenticationService.currentUserValue;

    if (authorize) {
        if (!currentUser) {
            // not logged in so redirect to login page with the return url
            return next({ path: '/login', query: { returnUrl: to.path } });
        }

        // check if route is restricted by role
        if (authorize.length && currentUser.role !== to.meta.role) {
            // role not authorised so redirect to home page
            return next({ path: '/' });
        }
    }

    next();
})

Leave a comment