Item 102 migrer la page d'accueil en vue 3

src/App.vue

@@ -13,7 +13,7 @@
 
 <script setup>
 import {ref} from 'vue'
-import AppTable from '@/components/exemplarisation/ExempTable.vue'
+import AppTable from '@/views/ExempTable.vue'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 

src/components/Home/BtnAccueil.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="btnAccueil py-12  px-4 d-flex align-center rounded"
+    style=" border-radius: 20px;"
+    @click="router.push(route)"
+  >
+    <v-icon x-large color="grey-darken-2" class="mr-3">{{ icon }}</v-icon>
+    <h3 class="flex-grow-1 text-center">
+      <slot/>
+    </h3>
+  </div>
+</template>
+
+<script setup>
+import router from '@/router';
+
+const props = defineProps({
+  icon: { type: String, required: true },
+  route: { type: String, required: true }
+})
+</script>
+<style scoped>
+.btnAccueil:hover {
+  cursor: pointer;
+  background-color: lightgrey !important;
+  transition-duration: 0.3s;
+}
+.btnAccueil {
+  border: 1px solid black;
+}
+</style>

src/main.js

@@ -7,7 +7,7 @@ import App from './App.vue'
 // Composables
 import {createApp} from 'vue'
 import { createVuetify } from 'vuetify'
-import router from './router/router'
+import router from '@/router'
 import {en, fr} from 'vuetify/locale'
 
 const app = createApp(App)

src/router/index.js

@@ -0,0 +1,75 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Main from '@/views/AppLogin.vue';
+import ExempTable from '@/views/ExempTable.vue';
+import ModifTable from '@/views/ModifTable.vue';
+import RecouvTable from '@/views/RecouvTable.vue';
+import ModifSteps from '@/views/ModifSteps.vue';
+import Accueil from '@/views/Accueil.vue';
+
+const routes = [
+  {
+    path: '/',
+    component: Accueil,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Main,
+    meta: { requiresAuth: false }
+  },
+  {
+    path: '/accueil',
+    name: 'accueil',
+    component: Accueil,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/exemplarisationTableau',
+    name: 'exemplarisationTableau',
+    component: ExempTable,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/modificationTableau',
+    name: 'modificationTableau',
+    component: ModifTable,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/recouvrementTableau',
+    name: 'recouvrementTableau',
+    component: RecouvTable,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/modificationNouvelleDemande',
+    name: 'modificationNouvelleDemande',
+    component: ModifSteps,
+    meta: { requiresAuth: true }
+  },
+// Ajoutez d'autres routes selon vos besoins
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+router.beforeEach(async (to, from, next) => {
+  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
+
+  if (requiresAuth) {
+    const user = JSON.parse(sessionStorage.getItem('user'));
+    // Vérifiez si l'utilisateur est authentifié
+    const isAuthenticated = user && user.token;
+    if (!isAuthenticated) {
+      // L'utilisateur n'est pas authentifié, redirigez-le vers la page de connexion
+      // next('/login');
+    }
+  }
+  // La page ne nécessite pas d'authentification, autorisez l'accès
+  next();
+});
+
+export default router;