[Vuejs]-Adding role based routes in vue router with pinia

by

1👍

✅

Pinia store cannot be normally accessed at the top of a module, useAuthStore is a function and not an object because this allows to prevent eager access. It should be called in the place where store data is actually needed. In this case this would result in race condition because user is likely not set at this moment.

View component can be conditionally set like this:

  {
    path: '/home',
    name: 'home',
    component: () => useAuthStore().user.role === 'roleOne' 
      ? import('@/pages/RoleOne/Home')
      : import('@/pages/RoleTwo/Home')
  },
👤Estus Flask

Leave a comment