diff --git a/src/router/constants.js b/src/router/constants.js new file mode 100644 index 0000000..cee1edb --- /dev/null +++ b/src/router/constants.js @@ -0,0 +1,5 @@ +export const Role = { + Admin: 'admin', + User: 'user', + Guest: 'guest', + }; \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 6257f01..35b5314 100644 --- a/src/router/index.js +++ b/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; + \ No newline at end of file diff --git a/src/views/LandingPages/Logout/BasicView.vue b/src/views/LandingPages/Logout/BasicView.vue new file mode 100644 index 0000000..4cf7f9d --- /dev/null +++ b/src/views/LandingPages/Logout/BasicView.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/LandingPages/Unauthorized/BasicView.vue b/src/views/LandingPages/Unauthorized/BasicView.vue new file mode 100644 index 0000000..2ee9fec --- /dev/null +++ b/src/views/LandingPages/Unauthorized/BasicView.vue @@ -0,0 +1,3 @@ + \ No newline at end of file