0👍
This is just an example:
import VueRouter from 'vue-router';
const router = new VueRouter({
routes: [
{
path: '/',
component: homePage
},
{
path: '/admin',
component: adminPage,
meta:
{
requiresAdmin: true
}
},
{
path: '/customer',
component: customerPage,
meta:
{
customerOnly: true
}
},
{
path: '/driver',
component: driverPage,
meta:
{
driverOnly: true
}
},
];
});
router.beforeEach((to, from, next) =>
{
const role = getCurrentUserRole(); // somehow obtain the role of the current user - or NULL if the user is not logged in
const requiresAdmin = to.matched.some(route => route.meta.requiresAdmin);
const customerOnly = to.matched.some(route => route.meta.customerOnly);
const driverOnly = to.matched.some(route => route.meta.driverOnly);
if(!role && (requiresAdmin || customerOnly || driverOnly)) next({name: 'loginPage'});
else
{
if(requiresAdmin)
{
if(role == 'admin') next();
else next({name: 'accessDenied'});
}
else if(customerOnly)
{
if(['admin', 'customer'].includes(role)) next();
else next({name: 'accessDenied'});
}
else if(driverOnly)
{
if(['admin', 'driver'].includes(role)) next();
else next({name: 'accessDenied'});
}
else next(); // this is public page
}
});
export default router;
and in your Login.vue
// Use whatever authorization system you need
firebase.login().then(user =>
{
let routeName = 'Dashboard';
switch(user.role)
{
case 'admin':
routeName = 'AdminHome';
break;
case 'drvier':
routeName = 'DriverHome';
break;
case 'customer':
routeName = 'CustomerHome';
break;
}
this.$router.push({name: routeName});
});
Source:stackexchange.com