add: guard in router

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import AuthLayout from '../layouts/AuthLayout.vue'
 import PublicLayout from '../layouts/PublicLayout.vue'
+import { useAuthStore } from '../stores/auth';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,6 +31,11 @@ const router = createRouter({
           name: 'register-company',
           component: () => import('../views/CompleteRegisterView.vue')
         },
+        {
+          path: '/:pathMatch(.*)*',
+          name: 'not-found',
+          component: () => import('../views/LoginView.vue'),
+        }
       ]
     },
     {
@@ -68,88 +74,121 @@ const router = createRouter({
       path: '/dashboard',
       name: 'dashboard',
       component: () => import('../layouts/AdminLayout.vue'),
-      meta: { requiresAuth: true },
+      meta: { 
+        requiresAuth: true,
+        roles: ['manager', 'staff', 'owner']
+      },
       children: [
         {
           path: 'inicio',
           name: 'home',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/HomeView.vue'),
         },
         {
           path: 'empresa',
           name: 'company',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/MyCompanyView.vue'),
         },
         {
           path: 'profile',
           name: 'profile',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/EditProfileView.vue'),
         },
         {
           path: 'empresa/:id',
           name: 'public-users',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/PublicUsersCompanyView.vue'),
         },
         {
           path: 'ubicaciones',
           name: 'locations',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/LocationsView.vue'),
         },
         {
           path: 'ofertas',
           name: 'published-trucks',
+          meta: { permissions: ['role_carrier'] },
           component: () => import('../views/TrucksPublishedView.vue'),
         },
         {
           path: 'usuarios',
           name: 'users',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/UsersView.vue'),
         },
         {
           path: 'calculadora',
           name: 'calculator',
+          meta: { permissions: ['role_carrier'] },
           component: () => import('../views/CalculatorView.vue'),
         },
         {
           path: 'reportes',
           name: 'reports',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
           component: () => import('../views/ReportsView.vue'),
         },
         {
           path: 'calendario',
           name: 'calendar',
+          meta: {
+            permissions: ['role_shipper', 'role_carrier'],
+            roles: ['staff', 'manager', 'owner', 'store']
+          },
           component: () => import('../views/CalendarView.vue'),
         },
         {
           path: 'cargas',
+          meta: { permissions: ['role_shipper'] },
           name: 'published-loads',
           component: () => import('../views/LoadsPublishedView.vue'),
         },
         {
           path: 'vehiculos',
           name: 'vehicles',
+          meta: { permissions: ['role_carrier'] },
           component: () => import('../views/VehiclesView.vue'),
         },
         {
           path: 'transportistas',
           name: 'carriers',
+          meta: { permissions: ['role_shipper'] },
           component: () => import('../views/CarriersView.vue'),
         },
         {
           path: 'embarcadores',
           name: 'shippers',
+          meta: { permissions: ['role_carrier'] },
           component: () => import('../views/ShippersView.vue'),
         },
         {
           path: 'buscar-cargas',
           name: 'search-loads',
+          meta: { permissions: ['role_carrier'] },
           component: () => import('../views/SearchLoadsView.vue'),
         },
         {
-          path: 'buscar-vehiclulos',
+          path: 'buscar-vehiculos',
           name: 'search-vehicles',
+          meta: { permissions: ['role_shipper'] },
           component: () => import('../views/SearchVehiclesView.vue'),
         },
+        {
+          path: '403',
+          name: '403',
+          meta: { permissions: ['role_shipper', 'role_carrier'] },
+          component: () => import('../views/NotFoundView.vue'),
+        },
+        {
+          path: '/:pathMatch(.*)*',
+          name: 'not-found',
+          component: () => import('../views/HomeView.vue'),
+        }
       ]
     }
   ]
@@ -158,16 +197,63 @@ const router = createRouter({
 router.beforeEach( async(to, from, next) => {
   const requiresAuth = to.matched.some(url => url.meta.requiresAuth)
   if(requiresAuth === true) {
+    const auth = useAuthStore()
     const session = localStorage.getItem('session');
-    //Comprobamos si el usuario esta authenticado
+    const permissions = to.meta.permissions;
+    const roles = to.meta.roles;
+
     if(session) {
+        await auth.checkSession()
+        const permissionUser = auth?.user?.permissions;
+        const role = auth?.user?.job_role;
+        if (!permissionUser) {
+            return next({name: 'login'}); // Redirige al login si no está autenticado
+        }
+
+        if (permissions && !permissions.includes(permissionUser)) {
+          if(role === 'store') { /// Check if user is store
+            return next({name: 'calendar'});
+          } else {
+            return next({name: 'home'});
+          }
+        }
+
+        if(roles && !roles.includes(role)) {
+            return next({name: 'calendar'});
+        }
+
         next();
     } else {
-      next({name: 'login'})
+        return next({name: 'login'})
     }
   } else {
     next();
   }
 });
 
+// router.beforeEach( async(to, from, next) => {
+//   const requiresAuth = to.matched.some(url => url.meta.requiresAuth)
+//   if(requiresAuth === true) {
+//     const session = localStorage.getItem('session');
+//     const role = localStorage.getItem('user');
+//     const permissions = to.meta.permissions;
+//     const auth = useAuthStore()
+//     //Comprobamos si el usuario esta authenticado
+//     if(session) {
+//       if (!role) {
+//         return next({name: 'login'}); // Redirige al login si no está autenticado
+//       }
+
+//       if (permissions && !permissions.includes(role)) {
+//         return next({name: 'home'}); // Redirige a una página de acceso denegado si no tiene permisos
+//       }
+//       next();
+//     } else {
+//       return next({name: 'login'})
+//     }
+//   } else {
+//     next();
+//   }
+// });
+
 export default router