Header.vue

<script setup>
import { ref, onMounted } from 'vue';


let isConnected = ref(false);
let firstname = ref('');

function checkConnection() {
    const req = fetch('http://localhost:3000/user', { credentials: 'include' }).then(response => {
        if (response.ok) {
            isConnected.value = true;
            return response.json();
        } else {
            isConnected.value = false;
            return null;
        }
    }).then(data => {
        if (data) {
            firstname.value = data.firstname;
        }

    }).catch(erreur => {
        console.error('Erreur lors de l\'appel API :', erreur);
        isConnected.value = false;
    });

}

function logout() {

    const req = fetch('http://localhost:3000/user/logout', { credentials: 'include' }).then(response => {
        if (response.ok) {
            isConnected.value = false;
        }
    }).catch(erreur => {
        console.error('Erreur lors de l\'appel API :', erreur);
    });

}

onMounted(() => {
    checkConnection();
});


</script>

<template>
    <header>
        <router-link to="/">
            <div>Projet S5</div>
        </router-link>
        <nav>
            <router-link v-if="!isConnected" to="/inscription">Inscription</router-link>
            <router-link v-if="!isConnected" to="/connexion">Connexion</router-link>
            <router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link>
            <button v-if="isConnected" @click="logout">Déconnexion</button>

        </nav>
    </header>
</template>

<style scoped></style>