xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 04:04:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix authentification

Browse Source
This commit is contained in:
Saadani-Malek92 2024-05-17 17:10:37 +01:00
parent e1436f1eff
commit b785227d74
3 changed files with 116 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/router/index.js
View File

@ -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;

20
src/stores/index.js
View File

@ -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
},
},
})

55
src/views/Auth/AdminLogin.vue
View File

@ -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);
}
};
</script>
<template>
<Header>
<div
@ -51,28 +76,32 @@ const handleLogin = async () => {
</div>
</div>
<div class="card-body">
<form role="form" class="text-start" @submit.prevent="handleLogin">
<form role="form" class="text-start" @submit.prevent="handleLogin">
<MaterialInput
id="email"
class="input-group-outline my-3"
:label="{ text: 'Email', class: 'form-label' }"
type="email"
v-model="email"
/>
<MaterialInput
id="password"
class="input-group-outline mb-3"
:label="{ text: 'Password', class: 'form-label' }"
type="password"
v-model="password"
/>
<button type="submit">login</button>
<div class="text-center">
<MaterialButton
class="my-4 mb-2"
variant="gradient"
color="info"
fullWidth
>Sign in</MaterialButton
@click="handleLogin"
>
Sign in
</MaterialButton>
</div>
</form>
</div>