Added client to call backend authentication logic

src/views/main/HomeView.vue

@@ -13,14 +13,63 @@
 
     </div>
 
-    <v-btn variant="outlined">
-      Button
+    <v-btn variant="outlined" @click="callBackend()">
+      Get items
     </v-btn>
 
+    <v-snackbar v-model="errorNoAccessSnackBar">
+        Vous n'etes pas connecter !
+        <template v-slot:actions>
+            <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
+              Fermer
+            </v-btn>
+            <v-btn color="green" variant="text" @click="goToLoginPage()">
+              Se connecter
+            </v-btn>
+        </template>
+    </v-snackbar>
+
+    <v-list lines="one">
+      <v-list-item
+        v-for="item in itemList"
+        :key="item"
+        :title="item.id"
+        :subtitle="item.title"
+      ></v-list-item>
+    </v-list>
+
   </main>
 </template>
 
-<script setup>
+<script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
-</script>
+import { ref } from 'vue'
+import { useClient } from '@/plugins/clientPlugin';
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+const client = useClient();
+
+let itemList = ref([]);
+let errorNoAccessSnackBar = ref(false);
+
+async function callBackend() {
+  try {
+    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
+    const responseItems = response.data.items;
+    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
+    console.log(orderedResponseItems);
+    itemList.value = orderedResponseItems
+
+  } catch (error) {
+    errorNoAccessSnackBar.value = true;
+    console.log(error);
+  }
+}
+
+const goToLoginPage = () => {
+  router.push('/login');
+}
+
+
+</script>