add auth flux

user-interface/src/components/CollectKnowledge.vue

@@ -2,7 +2,7 @@
     import { BField, BInput, BButton, useToast } from "buefy";
     //import { apiClient } from "@/services/api";
     import api from "@/services/apiAxios"
-    import { AxiosResponse } from "axios";
+    import type { AxiosResponse } from "axios";
     import { ref } from "vue";
 
     import type { Knowledge, KnowledgeCreate } from "@/types/types";

user-interface/src/components/EvaluateQuestion.vue

@@ -8,6 +8,7 @@
     import { useItemStore } from '@/stores/item'
 
     import api from "@/services/apiAxios"
+    import type { AxiosResponse } from "axios";
 
     //const stepStore = useStepStore()
     const itemStore = useItemStore()
@@ -32,7 +33,7 @@
     })
 
     async function getQuestions(knowledge: Knowledge): Promise<Question[]>{
-        const response = await api.get(`api/v1/knowledges/${knowledge.id}/questions`)
+        const response: AxiosResponse = await api.get(`api/v1/knowledges/${knowledge.id}/questions`)
         const questions: Question[] = response.data
         return questions
     }

user-interface/src/router/index.ts

@@ -1,4 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { isAuthenticated } from '@/services/apiAxios'
+
+const pagesWithoutGuard = ['login', 'app']
  
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,6 +10,12 @@ const router = createRouter({
       path: '/',
       alias: '/app',
       name: 'app',
+      component: () => import('@/views/WelcomeView.vue'),
+    },
+    {
+      path: '/experiment',
+      alias: '/experiment',
+      name: 'experiment',
       component: () => import('@/views/ExperimentView.vue'),
     },
     {
@@ -18,4 +27,11 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach(async (to, from) => {
+  const isAuth = await isAuthenticated()
+  if (!isAuth && !pagesWithoutGuard.includes(to.name!.toString())) {
+    return { name: 'login' }
+  }
+})
+
 export default router

user-interface/src/services/apiAxios.ts

@@ -1,4 +1,5 @@
 import axios from "axios"
+import type { AxiosResponse } from "axios";
 
 const api = axios.create({
     baseURL: import.meta.env.VITE_API_URL
@@ -20,7 +21,21 @@ export const authAPI = {
             new URLSearchParams({ username, password }),
             { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
         ),
-    getMe: () => api.get('/auth/me')
+    getMe: () => api.get('/api/v1/auth/me')
+}
+
+export const isAuthenticated = async () => {
+    try {
+        const response: AxiosResponse = await authAPI.getMe()
+    if (response.status==200)
+        return true
+    else 
+        return false
+    }
+    catch{
+        return false
+    }
+    
 }
 
 export default api;

user-interface/src/views/AuthView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+    import router from '@/router/index' 
     import { BField, BInput, BButton, useToast } from "buefy";
     import { ref } from "vue"
     import { authAPI } from '@/services/apiAxios'
@@ -16,6 +17,7 @@
             localStorage.setItem('access_token', access_token)
             localStorage.setItem('refresh_token', refresh_token)
             
+            router.push({ path: '/experiment' })
         } catch (err){
             console.log(err)
             Toast.open({message: "Login failed", type: "is-danger"})

user-interface/src/views/ExperimentView.vue

@@ -13,9 +13,6 @@
         <section id="section-central">
             <component :is="stepStore.getCurrentComponent"></component>
         </section>
-        <!-- <section>
-            <EvaluateQuestion/>
-        </section> -->
     </div>
 </template>
 

user-interface/src/views/WelcomeView.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+    import { BButton } from "buefy"
+</script>
+
+<template>
+    <section>
+        <b-button type="is-primary" size="is-medium" rounded>
+            <RouterLink to="/experiment"><span>Lancer l'expérience</span></RouterLink>
+        </b-button>
+    </section>
+</template>
+
+<style scoped>
+    section{
+        display: flex;
+        height: 80vh;
+        justify-content: center;
+        align-items: center;
+    }
+    span{
+        color: black;
+    }
+</style>