[Vuejs]-Routing if using admin

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});
});

Leave a comment