If admin access is enabled, the routing will be affected

Question

If admin access is enabled, the routing will be affected

Within my application, I have implemented 3 different access levels.

To grant the admin access to all pages, I inserted the following code in the admin section:

else if (claims.admin) { 
 return next() 
}

This configuration successfully allows the admin to navigate through all pages of the application.

However, a drawback arises where upon logging in as the admin, the admin remains on the login page without being redirected. My goal is for the admin to retain access to all pages while being directed to the admin.vue page upon logging in.

Below is the complete code snippet:

router.beforeEach((to, from, next) => {    
firebase.auth().onAuthStateChanged(userAuth => {
if (userAuth) {
  firebase.auth().currentUser.getIdTokenResult()
    .then(function ({
      claims
    }) {

if (claims.customer) {
  if (to.path !== '/customer')
   return next({
    path: '/customer',
   })
  } else if (claims.admin) {
  if (to.path !== '/admin')
   return next({
    path: '/admin',
   })
  } else if (claims.driver) {
if (to.path !== '/driver')
  return next({
   path: '/driver',
  })
 }     
 })
 })

javascript vue.js

Answer 1

Answer №1

This is simply a demonstration:

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(); // fetch the role of the current user - or return 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 a public page
  }
});

export default router;

and in your Login.vue

// Utilize any authorization system you prefer
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});
});

Answer 2

This is simply a demonstration:

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(); // fetch the role of the current user - or return 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 a public page
  }
});

export default router;

and in your Login.vue

// Utilize any authorization system you prefer
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});
});

If admin access is enabled, the routing will be affected

Answer №1

Similar questions

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

Nothing is in the Laravel array when using `$request->all()`

Add more JSON entries to the data submission in Express

Executing the Javascript function after the dynamic loading of the table through an ajax request

What is the method for a JavaScript program to determine if a global property name has been defined according to the ECMA-262 standard

What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

Creating a Cubic Bezier Curve connecting two points within a 3D sphere using three.js

Creating a custom map using React and Leaflet

What is the best way to dynamically insert an object into a field name in react-final-form?

Maximizing the potential of Next JS 13 Server Components

Incorporate a dropdown menu based on the selection made in another dropdown menu

VueJS showcasing information from an API

"Make sure to tick the checkbox if it's not already selected,

Conflict between multiple jQuery files

What is the process for changing search box suggestions in Google and Wikipedia to radio buttons?

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

Learn how to effortlessly retrieve shared properties using Vue3 in Single File Components with the new `<script setup>` syntax

Retrieving the parent value in React-select grouped options

Tips for duplicating specific div elements

Deleting data while retaining it in a separate location by leveraging nodejs and