diff --git a/src/router/index.js b/src/router/index.js index 3e9606e..2e72a67 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -28,6 +28,9 @@ import ElTypography from "../layouts/sections/elements/typography/TypographyView import UserLoginView from "../views/Auth/UserLogin.vue"; // import AdminView from "../views/LandingPages/Author/AuthorView.vue"; import { Role } from './constants'; +import { useStore } from '@/stores' + + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -172,45 +175,60 @@ const router = createRouter({ ], }); - - - 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' }); - } + const store = useStore() + console.log(store.isAuthenticated,store.user,"store") + //console.log(store.isAuthenticated,"store") + if (to.meta.requiresAuth && !store.isAuthenticated) { + next('/admin/auth') + } else if (to.meta.requiresVisitor && store.isAuthenticated) { + next('/sections/elements/progress-bars') } else { - // No authentication required for the route - next(); + next() } - }); + }) + + + + // 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/stores/index.js b/src/stores/index.js index e266a41..a15b9ce 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -1,7 +1,27 @@ import { defineStore } from "pinia"; import bootstrap from "bootstrap/dist/js/bootstrap.min.js"; + export const useAppStore = defineStore("storeId", { state: () => ({ bootstrap, }), }); + + +export const useStore = defineStore({ + id: 'main', + state: () => ({ + isAuthenticated: false, + user: null, + }), + actions: { + login(user) { + this.isAuthenticated = true + this.user = user + }, + logout() { + this.isAuthenticated = false + this.user = null + }, + }, +}) \ No newline at end of file diff --git a/src/views/Auth/AdminLogin.vue b/src/views/Auth/AdminLogin.vue index 450c696..5a5c4e0 100644 --- a/src/views/Auth/AdminLogin.vue +++ b/src/views/Auth/AdminLogin.vue @@ -5,22 +5,47 @@ import MaterialInput from "@/components/MaterialInput.vue"; import MaterialButton from "@/components/MaterialButton.vue"; import setMaterialInput from "@/assets/js/material-input"; import axios from "axios"; +import { ref } from 'vue' +import { useStore } from '@/stores' +import router from '@/router' onMounted(() => { setMaterialInput(); }); +const store = useStore() + const email = ref('') + const password = ref('') + + const handleLogin = async () => { - try { - const response = await axios.post('https://jsonplaceholder.typicode.com/posts?userId=1'); - console.log(response.data); - - // Redirect the user to the admin dashboard - // router.push('/admin/dashboard'); - } catch (err) { - console.log('Error:', err); - } -}; + try { + // Send a POST request to the login endpoint + const response = await axios.get('https://dummyjson.com/products/1', { + email: email.value, + password: password.value + }) + + // Check if the login was successful + console.log(response && response.status===200); + if (response && response.status===200) { + // Save the user to the store + store.login({ + name: response.data.name, + email: response.data.email + }) + + // Navigate the user to the admin dashboard + router.push('/') + } else { + // Display an error message if the login failed + alert('Invalid email or password') + } + } catch (err) { + console.log('Error:', err); + } + }; +