first commit

resources/js/plugins/1.router/additional-routes.js

@@ -0,0 +1,71 @@
+const emailRouteComponent = () => import('@/pages/apps/email/index.vue')
+
+// 👉 Redirects
+export const redirects = [
+  // ℹ️ We are redirecting to different pages based on role.
+  // NOTE: Role is just for UI purposes. ACL is based on abilities.
+  {
+    path: '/',
+    name: 'index',
+    redirect: to => {
+      // TODO: Get type from backend
+      const userData = useCookie('userData')
+      const userRole = userData.value?.role
+      if (userRole === 'admin')
+        return { name: 'dashboards-crm' }
+      if (userRole === 'client')
+        return { name: 'access-control' }
+      
+      return { name: 'login', query: to.query }
+    },
+  },
+  {
+    path: '/pages/user-profile',
+    name: 'pages-user-profile',
+    redirect: () => ({ name: 'pages-user-profile-tab', params: { tab: 'profile' } }),
+  },
+  {
+    path: '/pages/account-settings',
+    name: 'pages-account-settings',
+    redirect: () => ({ name: 'pages-account-settings-tab', params: { tab: 'account' } }),
+  },
+]
+export const routes = [
+  // Email filter
+  {
+    path: '/apps/email/filter/:filter',
+    name: 'apps-email-filter',
+    component: emailRouteComponent,
+    meta: {
+      navActiveLink: 'apps-email',
+      layoutWrapperClasses: 'layout-content-height-fixed',
+    },
+  },
+
+  // Email label
+  {
+    path: '/apps/email/label/:label',
+    name: 'apps-email-label',
+    component: emailRouteComponent,
+    meta: {
+      // contentClass: 'email-application',
+      navActiveLink: 'apps-email',
+      layoutWrapperClasses: 'layout-content-height-fixed',
+    },
+  },
+  {
+    path: '/dashboards/logistics',
+    name: 'dashboards-logistics',
+    component: () => import('@/pages/apps/logistics/dashboard.vue'),
+  },
+  {
+    path: '/dashboards/academy',
+    name: 'dashboards-academy',
+    component: () => import('@/pages/apps/academy/dashboard.vue'),
+  },
+  {
+    path: '/apps/ecommerce/dashboard',
+    name: 'apps-ecommerce-dashboard',
+    component: () => import('@/pages/dashboards/ecommerce.vue'),
+  },
+]

resources/js/plugins/1.router/guards.js

@@ -0,0 +1,45 @@
+import { canNavigate } from '@layouts/plugins/casl'
+
+export const setupGuards = router => {
+  // 👉 router.beforeEach
+  // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
+  router.beforeEach(to => {
+    /*
+         * If it's a public route, continue navigation. This kind of pages are allowed to visited by login & non-login users. Basically, without any restrictions.
+         * Examples of public routes are, 404, under maintenance, etc.
+         */
+    if (to.meta.public)
+      return
+
+    /**
+         * Check if user is logged in by checking if token & user data exists in local storage
+         * Feel free to update this logic to suit your needs
+         */
+    const isLoggedIn = !!(useCookie('userData').value && useCookie('accessToken').value)
+
+    /*
+          If user is logged in and is trying to access login like page, redirect to home
+          else allow visiting the page
+          (WARN: Don't allow executing further by return statement because next code will check for permissions)
+         */
+    if (to.meta.unauthenticatedOnly) {
+      if (isLoggedIn)
+        return '/'
+      else
+        return undefined
+    }
+    if (!canNavigate(to)) {
+      /* eslint-disable indent */
+            return isLoggedIn
+                ? { name: 'not-authorized' }
+                : {
+                    name: 'login',
+                    query: {
+                        ...to.query,
+                        to: to.fullPath !== '/' ? to.path : undefined,
+                    },
+                }
+            /* eslint-enable indent */
+    }
+  })
+}

resources/js/plugins/1.router/index.js

@@ -0,0 +1,39 @@
+import { setupLayouts } from 'virtual:generated-layouts'
+// eslint-disable-next-line import/no-unresolved
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { redirects, routes } from './additional-routes'
+import { setupGuards } from './guards'
+
+function recursiveLayouts(route) {
+  if (route.children) {
+    for (let i = 0; i < route.children.length; i++)
+      route.children[i] = recursiveLayouts(route.children[i])
+    
+    return route
+  }
+  
+  return setupLayouts([route])[0]
+}
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior(to) {
+    if (to.hash)
+      return { el: to.hash, behavior: 'smooth', top: 60 }
+    
+    return { top: 0 }
+  },
+  extendRoutes: pages => [
+    ...redirects,
+    ...[
+      ...pages,
+      ...routes,
+    ].map(route => recursiveLayouts(route)),
+  ],
+})
+
+setupGuards(router)
+export { router }
+export default function (app) {
+  app.use(router)
+}