auth midellware config

src/router/constants.js

@@ -0,0 +1,5 @@
+export const Role = {
+    Admin: 'admin',
+    User: 'user',
+    Guest: 'guest',
+  };

src/router/index.js

@@ -23,6 +23,12 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu
 import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
+
+import UnauthorizedView from "../views/LandingPages/Unauthorized/BasicView.vue"
+import LogoutView from "../views/LandingPages/Logout/BasicView.vue"
+import AdminView from "../views/LandingPages/Author/AuthorView.vue"
+import { Role } from './constants';
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -30,6 +36,7 @@ const router = createRouter({
       path: "/",
       name: "presentation",
       component: PresentationView,
+      meta: { requiresAuth: true, requiredRole: Role.Admin }, 
     },
     {
       path: "/pages/landing-pages/about-us",
@@ -146,7 +153,65 @@ const router = createRouter({
       name: "el-typography",
       component: ElTypography,
     },
-  ],
-});
-
-export default router;
+  
+        {
+          path: '/admin',
+          component: AdminView,
+          name: "admin",
+          meta: { requiresAuth: true, requiredRole: Role.Admin }, 
+        },
+        {
+          path: "/unauthorized",
+          name: "unauthorized",
+          component: UnauthorizedView,
+        },
+        {
+          path: "/logout",
+          name: "logout",
+          component: LogoutView,
+        },
+       
+      ],
+    });
+    
+    
+    function isAuthenticated() {
+      // Check if the user is authenticated, e.g., by verifying the presence of a valid token or logged-in state
+      // Return true if authenticated, false otherwise
+      // Example: return localStorage.getItem('token') !== null;
+    
+      return true;
+    }
+    
+    function getCurrentUserRole() {
+      // Retrieve the current user's role from your authentication system or state management
+      // Return the role of the current user
+      // Example: return localStorage.getItem('userRole');
+      return "guest";
+    }
+    
+    // Route guard
+    router.beforeEach((to, from, next) => {
+      if (to.meta.requiresAuth) {
+        // Check if the user is authenticated, e.g., by checking the presence of a valid token or logged-in state
+        if (isAuthenticated()) {
+          // Check if the user has the required role
+          if (to.meta.requiredRole && getCurrentUserRole() !== to.meta.requiredRole) {
+            // Redirect to a different route or show an error message
+            next({ path: '/unauthorized' });
+          } else {
+            // Proceed to the requested route
+            next();
+          }
+        } else {
+          // Redirect to the login page or a suitable route for unauthenticated users
+          next({ path: '/logout' });
+        }
+      } else {
+        // No authentication required for the route
+        next();
+      }
+    });
+    
+    export default router;
+    

src/views/LandingPages/Logout/BasicView.vue

@@ -0,0 +1,3 @@
+<template>
+    Logout page
+</template>

src/views/LandingPages/Unauthorized/BasicView.vue

@@ -0,0 +1,3 @@
+<template>
+    Unautorized Page
+</template>